<template>
    <!-- 用于出口订单详情步骤 -->
    <el-steps class="steps-container" :active="active" align-center>
        <el-step>
            <!-- 自定义标题插槽，用于显示标题和日期 -->
           <template v-if="active > 1" #icon>
               <el-icon><Select /></el-icon>
           </template>
           <template #title>
               <span class="custom-step-title" >下单</span>
           </template>
            <template #description>
                <div class="custom-step-description">{{formatDate(porps.orderData.createTime,2)}}</div>
            </template>
        </el-step>
        <el-step>
            <template v-if="active > 2" #icon>
               <el-icon ><Select /></el-icon> 
            </template>
            <template #title>
                <span class="custom-step-title">签署</span>
            </template>
            <template #description>
                <el-row v-if="hoveredStep2 == 'show'" class="custom-step-description" justify="center" align="middle">
                    <el-col :span="24" class="text-center"><el-button type="primary" size="samll" plain @click="viewContract">查看合同</el-button></el-col>
                </el-row>
                <el-row v-else class="custom-step-description">
                    <el-col :span="24" v-if="porps.orderData.signDate">{{formatDate(porps.orderData.signDate,2)}}</el-col>
                    <el-col :span="24" v-else style="color: #ff0000;">合同未签署</el-col>
                </el-row>
            </template>
        </el-step>
        <el-step>
            <template v-if="active > 3" #icon>
                <el-icon ><Select /></el-icon>
            </template>
            <template #title>
                <span class="custom-step-title">提箱({{porps.orderData.packedQuantity}}/{{porps.orderData.packingAllocationQuantity}})</span>
            </template>
            <template #description>
                <el-row v-if="hoveredStep3 == 'show'" class="custom-step-description"  justify="center" align="middle">
                    <el-col :span="12" class="text-center"><el-button type="primary" plain @click="viewContainer('txd')">提箱单</el-button></el-col>
                    <el-col :span="12" class="text-center"><el-button type="primary" plain @click="viewContainer('txjl')">提箱记录</el-button></el-col>
                </el-row>
            </template>
        </el-step>
        <el-step>
            <template v-if="active > 4" #icon>
                <el-icon><Select /></el-icon>
            </template>
            <template #title>
                <span class="custom-step-title">还箱({{porps.orderData.returnedQuantity}}/{{porps.orderData.packedQuantity || 0}})</span>
            </template>
            <template #description>
                <el-row v-if="hoveredStep4 == 'show'" class="custom-step-description" justify="center" align="middle">
                    <el-col :span="12" class="text-center"><el-button type="primary" plain @click="viewReturnList('hxd')">还箱单</el-button></el-col>
                    <el-col :span="12" class="text-center"><el-button type="primary" plain @click="viewReturnList('hxjl')">还箱记录</el-button></el-col>
                </el-row>
            </template>
        </el-step>
        <template v-if="porps.status == 35 || porps.status == 40"> 
            <el-step>
                <template v-if="active > 5" #icon>
                    <el-icon><Select /></el-icon>
                </template>
                <template #title>
                    <span class="custom-step-title">财务</span>
                </template>
                <template #description>
                    <el-row v-if="hoveredStep5 == 'show'" class="custom-step-description" justify="center" align="middle">
                        <template v-if="businessRoleEnum == 10">
                            <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('fy')">费用</el-button></el-col>
                        </template>
                        <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('zd')">账单</el-button></el-col>
                        <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('fp')">发票</el-button></el-col>
                    </el-row>
                </template>
            </el-step>
        </template>
        <template v-else>
            <el-step :status="active > 2 ? 'finish' : 'wait'">
                <template v-if="active > 5" #icon>
                    <el-icon><Select /></el-icon>
                </template>
                <template #title>
                    <span>财务</span>
                </template>
                <template #description>
                    <el-row v-if="hoveredStep5 == 'show'" class="custom-step-description" justify="center" align="middle" gutter="20">
                        <template v-if="businessRoleEnum == 10">
                            <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('fy')">费用</el-button></el-col>
                        </template>
                        <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('zd')">账单</el-button></el-col>
                        <el-col :span="8" class="text-center"><el-button type="primary" plain @click="displayCost('fp')">发票</el-button></el-col>
                    </el-row>
                </template>
            </el-step>
        </template>
        <el-step>
            <template v-if="active > 6" #icon>
                <el-icon><Select /></el-icon>
            </template>
            <template #title>
                <span class="custom-step-title">
                    <template v-if="porps.status == 40">待取消</template>
                    <template v-else-if="porps.status == 35">已取消</template>
                    <template v-else>已完成</template>
                </span>
            </template>
            <template #description>
                <span class="custom-step-description">
                    <template v-if="porps.status > 35"><span style="color: #ff0000;">{{porps.orderData.remark}}</span></template>
                </span>
            </template>
        </el-step>
   </el-steps>
   <!-- 合同预览 -->
   <el-dialog v-model="constantDialog" title="合同" width="1000">
       <a :href="pdfSource" style="float: right;color: #2158f3;margin-right: 50px;">下载合同</a>
       <pdfViewer :url="pdfSource"></pdfViewer>
   </el-dialog>
   <!-- 查看提箱单/提箱记录 -->
   <el-drawer v-model="containerDialog" :with-header="false" size="50%" >
       <span class="_before">提箱</span>
       <el-row class="marginTop20" align="middle">
            <el-col :span="20">
                <el-tabs v-model="tableLayout" class="demo-tabs" @tab-change="viewContainer(tableLayout)">
                    <el-tab-pane label="提箱单" name="txd"></el-tab-pane>
                    <el-tab-pane label="提箱记录" name="txjl"></el-tab-pane>
                </el-tabs>
            </el-col>
            <template v-if="tableLayout == 'txd'"> 
                <el-col :span="4" class="text-right" v-if="businessRoleEnum == 10 && (porps.orderData.packingAllocationQuantity < porps.orderData.boxQuantity)" >
                    <template v-if="porps.status == 5 || porps.status == 10 || porps.status == 15">
                        <el-button type="primary" plain size="small" @click="showPickingList">开提箱单</el-button>
                    </template>
                </el-col>  
            </template>
            <template v-if="tableLayout == 'txjl'">
                <el-col :span="4" class="text-right" v-if="businessRoleEnum == 5">
                    <el-button type="primary" plain size="small" @click="hxApply('batchApply','')">还箱申请</el-button>
                </el-col>
            </template>
       </el-row>
       <template v-if="tableLayout == 'txd'">
           <el-table :data="pickUpListData" class="marginTop20" style="width: 100%" border>
               <!-- <el-table-column prop="orderNo" label="订单号" width="190" align="center"/> -->
               <!-- <el-table-column prop="companyName" label="集装箱公司" width="220" align="center"/> -->
               <el-table-column prop="boxType" label="箱型" align="center">
                   <template #default="scope">
                       {{basicConfig.boxTypeInfo1[scope.row.boxType]}}
                   </template>
               </el-table-column>
               <el-table-column prop="boxCondition" label="箱况" align="center">
                   <template #default="scope">
                       {{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}
                   </template>
               </el-table-column>
               <el-table-column prop="totalQuantity" label="总箱量" align="center"/>
               <el-table-column prop="packedQuantity" label="已提箱量" align="center"/>
               <el-table-column prop="totalQuantity" label="未提箱量" align="center">
                   <template #default="scope">
                       {{ scope.row.totalQuantity - scope.row.packedQuantity }}
                   </template>
               </el-table-column>
               <el-table-column prop="yardName" label="堆场名称" width="150" align="center"/>
               <el-table-column prop="packingStatus" label="状态" align="center">
                    <template #default="scope">
                        <span :class="scope.row.packingStatus==5 ? 'status5':'' || scope.row.packingStatus==10 ? 'status10':'' 
                        || scope.row.packingStatus==15 ? 'status15':'' || scope.row.packingStatus==20 ? 'status20':''
                        || scope.row.packingStatus==25 ? 'status25':'' || scope.row.packingStatus==30 ? 'status30':''" >
                        {{{5:'已发放',10:'已下载',15:'提箱中',20:'已完成',25:'作废',30:'已过期'}[scope.row.packingStatus]}}
                            </span>
                    </template>
               </el-table-column>
               <el-table-column prop="containerClassify" label="提箱单类型" width="120" align="center" v-if="businessRoleEnum == 10">
                    <template #default="scope">{{basicConfig.containerClass[scope.row.containerClassify]}}</template>
               </el-table-column>
               <el-table-column prop="outBoxCompanyName" label="集装箱公司" width="120" align="center" v-if="businessRoleEnum == 10">
                    <template #default="scope">{{scope.row.outBoxCompanyName || '--'}}</template>
               </el-table-column>
               <el-table-column prop="packingValidityPeriodStart" label="提箱单有效期" width="200" align="center">
                    <template #default="scope">{{ formatDate(scope.row.packingValidityPeriodStart,2) }} ~ {{ formatDate(scope.row.packingValidityPeriodEnd,2) }}</template>
               </el-table-column>
               <el-table-column prop="residuePackingDays" label="剩余提箱天数" width="135" align="center">
                    <template #header>
                        <el-tooltip content="负数代表超期未提天数" effect="dark" placement="top">
                            <el-button link>剩余提箱天数<el-icon class="el-icon--right"><QuestionFilled /></el-icon></el-button>
                        </el-tooltip>
                    </template>
                    <template #default="scope">
                        <template v-if="scope.row.residuePackingDays > 0"><span style="color: #34d334;">{{scope.row.residuePackingDays}}天</span></template>
                        <template v-else><span style="color:#e5ac54;">{{scope.row.residuePackingDays}}天</span></template>
                    </template>
               </el-table-column>
               <el-table-column prop="packingNo" label="提箱单号" width="180"  align="center">
                    <template #default="scope">
                        <span class="clickable-cell" @click="handleNameClick(scope.row)">{{ scope.row.packingNo }}</span>
                    </template>
               </el-table-column>
               <!-- <el-table-column prop="agentName" label="客户" width="220" align="center"/> -->
               <el-table-column prop="address" label="操作" fixed="right" width="150" align="center">
                   <template #default="scope">
                        <el-button link type="primary" size="small" @click="downloadAtta(scope.row)">下载</el-button>
                        <!-- <el-button link type="primary" size="small" @click="previewList(scope.row)">查看</el-button> -->
                        <template v-if="scope.row.containerClassify == 15" >
                            <template v-if="businessRoleEnum == 10 && porps.status < 35"><el-button link type="primary" size="small" @click="editPacking(scope.row)">编辑</el-button></template>
                            <template v-else><el-button link type="primary" size="small" @click="ckPacking(scope.row)">查看</el-button></template>
                        </template>
                        <template v-else>
                            <el-button link type="primary" size="small" @click="ckPacking(scope.row)">查看</el-button>
                        </template>
                        <template v-if="businessRoleEnum == 10 && scope.row.packingStatus < 20">
                            <el-button link type="primary" size="small" @click="drawerPackingOpen(scope.row)">过期重开</el-button>
                        </template>
                        <template  v-if="scope.row.packingStatus < 20 && (porps.status != 40 && porps.status != 45)">
                            <el-button link type="primary" size="small" @click="addPickupRecord(scope.row)">新增箱照</el-button>
                        </template>
                        <template v-if="businessRoleEnum == 5 && scope.row.packingStatus < 20">
                            <el-button link type="primary" size="small" @click="endPacking(scope.row)">不再提箱</el-button>
                        </template>
                   </template>
               </el-table-column>
           </el-table>
       </template>
       <template v-else-if="tableLayout == 'txjl'">
           <el-table :data="allPickupRecord" class="marginTop20" @selection-change="txjlSelectionChange" style="width: 100%" border>
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column prop="containerNo" label="箱号" width="140" align="center"/>
                <el-table-column prop="boxType" label="箱型" width="80" align="center">
                    <template #default="scope">
                        {{basicConfig.boxTypeInfo1[scope.row.boxType]}}
                    </template>
                </el-table-column>
                <el-table-column prop="boxCondition" label="箱况" width="80" align="center">
                   <template #default="scope">
                       {{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}
                   </template>
                </el-table-column>
                <el-table-column prop="packingDate" label="提箱日期" width="120" align="center">
                    <template #default="scope">{{formatDate(scope.row.packingDate,2)}}</template>
                </el-table-column>
                <el-table-column prop="returnStatus" label="状态" align="center" width="100">
                        <template #default="scope">{{{10:'未还',12:'已申请',15:'还箱中',20:'已还箱'}[scope.row.returnStatus]}}</template>
                </el-table-column>
                <el-table-column prop="yardName" label="堆场名称" align="center" width="180"/>
                <el-table-column prop="packingNo" label="提箱单号" width="220" align="center"/>
                
                <el-table-column prop="yardName" label="操作" align="center" width="120" fixed="right">
                    <template  #default="scope">
                        <el-button link type="danger" size="small"  @click="deleteTxjl(scope.row)">删除</el-button>
                        <el-button link type="primary" size="small" @click="editTxjl(scope.row)">编辑</el-button>
                        <template v-if="scope.row.detailFileList && scope.row.detailFileList.length > 1">
                            <el-button link type="primary" size="small" @click="basicTools.batchDownloadFile(scope.row.detailFileList,scope.row.containerNo)">下载箱照</el-button>
                        </template>
                        <template v-if="scope.row.returnStatus < 12 && businessRoleEnum == 5">
                            <el-button link type="primary" size="small"  @click="hxApply('apply',scope.row)">还箱申请</el-button>
                        </template>
                        <template v-if="scope.row.returnStatus >= 12">
                            <el-button link type="primary" size="small" @click="hxApply('view',scope.row)">查看申请</el-button>
                        </template>
                    </template>
                </el-table-column>
           </el-table>
       </template>
   </el-drawer>
    <!-- 提箱单详情/编辑 -->
    <el-drawer v-model="txdDrawer" :with-header="false" size="40%">
        <span class="_before">提箱单</span>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">提箱单号：</el-col>
            <el-col :span="17">{{ txdInfo.packingNo }}</el-col>
        </el-row>
        <el-row  class="marginTop10" v-if="businessRoleEnum == 10">
            <el-col :span="5" class="text-right">提箱单类型：</el-col>
            <el-col :span="17">{{ basicConfig.containerClass[txdInfo.containerClassify] }}</el-col>
        </el-row>
        <el-row  class="marginTop10">
            <el-col :span="5" class="text-right"> 客户：</el-col>
            <el-col :span="19">{{ txdInfo.agentName }}</el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">租箱订单：</el-col>
            <el-col :offset="5" :span="19">
                <el-table :data="rentOrderList">
                    <el-table-column prop="orderNo" label="订单号" width="200" align="center"/>
                    <el-table-column label="预计提箱日期" width="150" align="center">
                        <template #default="scope"> {{ formatDate(scope.row.planPickupDate, 2) || '--'}} </template>
                    </el-table-column>
                    <el-table-column label="下单日期"  align="center">
                        <template #default="scope"> {{ formatDate(scope.row.createTime, 2) || '--'}} </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">提箱单有效期范围：</el-col>
            <el-col :span="19">{{ formatDate(txdInfo.packingValidityPeriodStart, 2) }}~{{ formatDate(txdInfo.packingValidityPeriodEnd, 2) }}</el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">箱型/箱量/箱况：</el-col>
            <el-col :offset="5" :span="19">
                <el-table :data="packingRecord">
                    <el-table-column prop="boxType" label="箱型">
                        <template #default="scope">{{basicConfig.boxTypeInfo1[scope.row.boxType]}}</template>
                    </el-table-column>
                    <el-table-column prop="boxCondition" label="箱况">
                        <template #default="scope">{{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}</template>
                    </el-table-column>
                    <el-table-column prop="boxQuantity" label="箱量">
                        <template #default="scope">{{scope.row.totalQuantity}}</template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="marginTop10" v-if="businessRoleEnum == 10">
            <el-col :span="5" class="text-right">成本价：</el-col>
            <el-col :span="19">{{ txdInfo.rentInCurrency == 'USD'?'$':'¥' }} {{ txdInfo.rentInPrice || '--'}}</el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">集装箱公司：</el-col>
            <el-col :span="19">{{ txdInfo.outBoxCompanyName || '--' }}</el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">堆场名称：</el-col>
            <el-col :span="19">{{ txdInfo.yardName }}</el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">放箱单：</el-col>
            <el-col :span="19" v-if="businessRoleEnum == 10">
                <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(txdInfo.pdfFile)" :displayType="3" :fileSize="3" :showNumber="4" :type="'jpg/png/jpeg/pdf'" :limit="1" :drag="true"></ImgUpload>
            </el-col>
            <el-col :span="19" v-if="businessRoleEnum == 5">
                <!-- <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(txdInfo.pdfFile)" :displayType="3" :fileSize="3" :showNumber="4" :type="'jpg/png/jpeg/pdf'" :limit="1" :drag="true"></ImgUpload> -->
                <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(txdInfo.pdfFile)" :hideUpload="true" :displayType="0" :fileSize="3" :showNumber="4" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" :limit="10" :drag="true"></ImgUpload>
            </el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">附件：</el-col>
            <el-col :span="19">
                <ImgUpload ref="addBoxFileRef" :urlList="JSON.parse(txdInfo.packingFileList)" :hideUpload="true" :displayType="0" :fileSize="3" :showNumber="4" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" :limit="10" :drag="true"></ImgUpload>
            </el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">备注：</el-col>
            <el-col :span="19">{{ txdInfo.remark || "--" }}</el-col>
        </el-row>
        <el-row class="marginTop10">
            <el-col :span="5" class="text-right">状态：</el-col>
            <el-col :span="19">{{ {5: '已发放', 10: '已下载', 15: '提箱中', 20: '已完成',25: '已作废', 30: '已过期'  }[txdInfo.packingStatus] }}</el-col>
        </el-row>
        <el-row class="marginTop50" v-if="businessRoleEnum == 10">  
            <el-col :span="24" class="text-center"><el-button type="primary" @click="txdDrawerSubmit(txdInfo.packingId)">确定</el-button></el-col>
        </el-row>
    </el-drawer>
    <!-- 提箱单详情 -->
    <el-drawer v-model="ckTxdDrawer" :with-header="false" size="40%">
        <span class="_before">提箱单详情</span>
        <div v-if="ckPackingInfo.containerClassify == 5">
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">租箱企业：</el-col>
                <el-col :span="19">{{ ckPackingInfo.companyName }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">提箱单号：</el-col>
                <el-col :span="19">{{ ckPackingInfo.packingNo }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">提箱单类型：</el-col>
                <el-col :span="19">{{basicConfig.containerClass[ckPackingInfo.containerClassify] }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right"> {{ ckPackingInfo.orderType==5 ? '客户：':'客户：' }} </el-col>
                <el-col :span="19">{{ ckPackingInfo.agentName }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">租箱订单：</el-col>
                <el-col :offset="5" :span="19">
                    <el-table :data="rentOrderList1">
                        <el-table-column prop="orderNo" label="订单号" align="center"/>
                        <el-table-column label="预计提箱日期" align="center">
                            <template #default="scope">{{ formatDate(scope.row.planPickupDate, 2) }} </template>
                        </el-table-column>
                        <el-table-column label="下单日期" align="center">
                            <template #default="scope"> {{ formatDate(scope.row.createTime, 2) }} </template>
                        </el-table-column>
                        <el-table-column prop="agentUserName" label="联系人" align="center"/>
                        <el-table-column prop="agentUserTel"  label="联系电话" align="center">
                            <template #default="scope">
                            <span v-if="scope.row.agentUserAreaCode">+{{ scope.row.agentUserAreaCode }} </span>
                            {{ scope.row.agentUserTel }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">放箱指令号：</el-col>
                <el-col :span="19">{{ ckPackingInfo.instruction }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">提箱单有效范围：</el-col>
                <el-col :span="19">
                    {{ formatDate(ckPackingInfo.packingValidityPeriodStart, 2) }}
                    ~
                    {{ formatDate(ckPackingInfo.packingValidityPeriodEnd, 2) }}
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">箱型/箱量/箱况：</el-col>
                <el-col :span="19">
                    <el-table :data="packingRecord1">
                        <el-table-column prop="boxType" label="箱型"> </el-table-column>
                        <el-table-column prop="boxCondition" label="箱况"> </el-table-column>
                        <el-table-column prop="boxQuantity" label="箱量" ></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">箱号：</el-col>
                <el-col :span="19">
                    <el-row >
                        <template v-for="(item,index) in  containerNoInfo" :key="index">
                            <el-col :span="6" style="border:1px solid #ccc;" class="text-center">{{item.containerNo}}</el-col>
                        </template>
                    </el-row>
                </el-col>
            </el-row>
            <el-row class="marginTop10" v-if="businessRoleEnum == 10">
                <el-col :span="5" class="text-right" >成本价：</el-col>
                <el-col :span="19">{{ ckPackingInfo.rentInCurrency == 'USD'?'$':'¥' }} {{ ckPackingInfo.rentInPrice || '--'}}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">堆场名称：</el-col>
                <el-col :span="19">{{ ckPackingInfo.yardName }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">堆场地址：</el-col>
                <el-col :span="19">{{ ckPackingInfo.yardAddress }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">联系人：</el-col>
                <el-col :span="19">{{ ckPackingInfo.yardContact }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">联系电话：</el-col>
                <el-col :span="19">+{{ckPackingInfo.areaCode}}  {{ ckPackingInfo.yardTel }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">邮箱：</el-col>
                <el-col :span="19">{{ ckPackingInfo.yardEmail }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">堆场作业时间：</el-col>
                <el-col :span="19">{{ ckPackingInfo.yardWorkTime }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">附件：</el-col>
                <el-col :span="19">
                    <ImgUpload ref="addBoxFileRef" :urlList="JSON.parse(ckPackingInfo.packingFileList)" :hideUpload="true" :displayType="0" :fileSize="3" :showNumber="4" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" :limit="10" :drag="true"></ImgUpload>
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">备注：</el-col>
                <el-col :span="19">{{ ckPackingInfo.remark }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">状态：</el-col>
                <el-col :span="19">{{ { 5: '已发放', 10: '已下载', 15: '提箱中', 20: '已完成' ,25: '已作废', 30: '已过期' }[ckPackingInfo.status] }}</el-col>
            </el-row>
        </div>
        <div v-else>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">提箱单号：</el-col>
                <el-col :span="17">{{ ckPackingInfo.packingNo }}</el-col>
            </el-row>
            <el-row  class="marginTop10">
                <el-col :span="5" class="text-right">提箱单类型：</el-col>
                <el-col :span="17">{{ basicConfig.containerClass[ckPackingInfo.containerClassify] }}</el-col>
            </el-row>
            <el-row  class="marginTop10">
                <el-col :span="5" class="text-right"> {{ ckPackingInfo.orderType==5 ? '客户：':'客户：' }} </el-col>
                <el-col :span="19">{{ ckPackingInfo.agentName }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">租箱订单：</el-col>
                    <el-col :offset="5" :span="19">
                    <el-table :data="rentOrderList1">
                        <el-table-column prop="orderNo" label="订单号" width="120" align="center"> </el-table-column>
                        <el-table-column label="预计提箱日期" width="120" align="center">
                            <template #default="scope"> {{ formatDate(scope.row.planPickupDate, 2) || '--'}} </template>
                        </el-table-column>
                        <el-table-column label="下单日期"  width="120" align="center">
                            <template #default="scope"> {{ formatDate(scope.row.createTime, 2) || '--'}} </template>
                        </el-table-column>
                        <el-table-column prop="agentUserName" label="联系人" align="center" />
                        <el-table-column label="联系电话" align="center">
                            <template #default="scope">
                                <span v-if="scope.row.agentUserAreaCode">+{{ scope.row.agentUserAreaCode }} {{scope.row.agentUserTel }} </span>
                            </template>
                        </el-table-column>>
                    </el-table>
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">提箱单有效期范围：</el-col>
                <el-col :span="19">
                    {{ formatDate(ckPackingInfo.packingValidityPeriodStart, 2) }}
                    ~
                    {{ formatDate(ckPackingInfo.packingValidityPeriodEnd, 2) }}
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">箱型/箱量/箱况：</el-col>
                <el-col :offset="5" :span="19">
                    <el-table :data="packingRecord1" border>
                        <el-table-column prop="boxType" label="箱型" align="center"> 
                            <template #default="scope">{{basicConfig.boxTypeInfo1[scope.row.boxType]}}</template>
                        </el-table-column>
                        <el-table-column prop="boxCondition" label="箱况" align="center">
                            <template #default="scope">{{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}</template> 
                        </el-table-column>
                        <el-table-column prop="boxQuantity" label="箱量" align="center"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row class="marginTop10" v-if="businessRoleEnum == 10">
                <el-col :span="5" class="text-right">成本价：</el-col>
                <el-col :span="19">{{ ckPackingInfo.rentInCurrency == 'USD'?'$':'¥' }} {{ ckPackingInfo.rentInPrice || '--'}}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">集装箱公司：</el-col>
                <el-col :span="19">{{ ckPackingInfo.outBoxCompanyName||'--' }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">堆场名称：</el-col>
                <el-col :span="19">{{ ckPackingInfo.yardName }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">放箱单：</el-col>
                <!-- <el-col :span="19">
                    <showFile :detailFileList="ckPackingInfo.pdfFile"></showFile>
                </el-col> -->

                <el-col :span="19" v-if="businessRoleEnum == 10">
                    <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(ckPackingInfo.pdfFile)" :displayType="3" :fileSize="3" :showNumber="4" :type="'jpg/png/jpeg/pdf'" :limit="1" :drag="true"></ImgUpload>
                </el-col>
                <el-col :span="19" v-if="businessRoleEnum == 5">
                    <!-- <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(txdInfo.pdfFile)" :displayType="3" :fileSize="3" :showNumber="4" :type="'jpg/png/jpeg/pdf'" :limit="1" :drag="true"></ImgUpload> -->
                    <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(ckPackingInfo.pdfFile)" :hideUpload="true" :displayType="0" :fileSize="3" :showNumber="4" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" :limit="10" :drag="true"></ImgUpload>
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">附件：</el-col>
                <el-col :span="19">
                    <!-- <showFile :detailFileList="ckPackingInfo.packingFileList"></showFile> -->
                    <ImgUpload ref="addBoxFileRef" :urlList="JSON.parse(ckPackingInfo.packingFileList)" :hideUpload="true" :displayType="0" :fileSize="3" :showNumber="4" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" :limit="10" :drag="true"></ImgUpload>
                </el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">备注：</el-col>
                <el-col :span="19">{{ ckPackingInfo.remark }}</el-col>
            </el-row>
            <el-row class="marginTop10">
                <el-col :span="5" class="text-right">状态：</el-col>
                <el-col :span="19">{{ {5: '已发放', 10: '已下载', 15: '提箱中', 20: '已完成',25: '已作废', 30: '已过期' }[ckPackingInfo.status] }}</el-col>
            </el-row>
        </div>
    </el-drawer>

   <!-- 还箱申请 -->
   <el-drawer v-model="hxApplyDialog" :with-header="false" size="40%" :destroy-on-close="true">
        <span class="_before">还箱申请</span>
        <el-row class="marginTop20">
            <el-col :span="24">类型：
                <el-radio-group v-model="returnBoxTypeValue" v-if="showType =='apply' || showType =='batchApply'">
                    <el-radio :value="10">箱属</el-radio>
                    <el-radio :value="15">还箱令</el-radio>
                    <!-- <el-radio :value="5" v-if="showType =='batchApply'">还箱单</el-radio> -->
                </el-radio-group>
                <span v-else-if="showType =='view'">{{{5:'还箱单',10:'箱属',15:'还箱令'}[txjlInfo.returnBoxType]}}</span>
            </el-col>
        </el-row>
        <template v-if="showType =='batchApply'">
            箱号：
            <template v-for="(item,index) in txjlSelectionInfo" :key="index">
                {{item.containerNo}} <template v-if="index < (txjlSelectionInfo.length -1)">、</template>
            </template>
        </template>
        <template v-else>
            <el-row class="marginTop20">
                <el-col :span="8">箱号：{{txjlInfo.containerNo}}</el-col>
                <el-col :span="16" class="text-ellipsis">还箱地：
                    <template v-if="txjlInfo.returnCity">
                        <el-tooltip effect="dark" :content="splitSrray(txjlInfo.returnCity)" placement="top">{{splitSrray(txjlInfo.returnCity)}}</el-tooltip>
                    </template>
                    <template v-else>--</template>
                </el-col>
            </el-row>
            <template v-if="showType =='apply'">
                <el-row class="marginTop20" v-if="returnBoxTypeValue == 10">
                    <el-col :span="3">提箱照片：</el-col>
                    <el-col :span="24" class="marginTop5">
                        <ImgUpload ref="packingRef5" :limit="10" :urlList="JSON.parse(txjlInfo.detailFileList || '[]')" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="6"></ImgUpload>
                    </el-col>
                </el-row>
                <el-row class="marginTop20" align="center" v-if="returnBoxTypeValue == 15">
                    <el-col :span="5" class="_asterisk">预计还箱日期：</el-col>
                    <el-col :span="10"><el-date-picker v-model="planReturnDate" type="date" :disabled-date="disabledDate" placeholder="还箱日期" style="width: 100%;"/></el-col>
                </el-row>
                <el-row class="marginTop20 _asterisk" v-if="returnBoxTypeValue == 15">
                    <el-col :span="3">到站运单：</el-col>
                    <el-col :span="24" class="marginTop5" v-if="showType =='apply'">
                        <ImgUpload ref="packingRef6" :limit="10" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :fileSize="5" :drag="true" :showNumber="6"></ImgUpload>
                    </el-col>
                    <el-col :span="24" class="marginTop5" v-else-if="showType =='view'">
                    <ImgUpload ref="packingRef6" :urlList="JSON.parse(txjlInfo.arrivalWaybill || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>
                    </el-col>
                </el-row>
                <el-row class="marginTop20" v-if="returnBoxTypeValue == 15">
                    <el-col :span="3">转关单：</el-col>
                    <el-col :span="24" class="marginTop5" v-if="showType =='apply'">
                        <ImgUpload ref="packingRef7" :limit="10" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :fileSize="5" :drag="true" :showNumber="6"></ImgUpload>
                    </el-col>
                    <el-col :span="24" class="marginTop5" v-else-if="showType =='view'">
                    <ImgUpload ref="packingRef7" :urlList="JSON.parse(txjlInfo.turnCustomBill || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>
                    </el-col>
                </el-row>
            </template>
            <template v-else-if="showType =='view'">
                <el-row class="marginTop20" v-if="returnBoxTypeValue == 10">
                    <el-col :span="3">提箱照片：</el-col>
                    <el-col :span="24" class="marginTop5">
                        <ImgUpload ref="packingRef5" :urlList="JSON.parse(txjlInfo.detailFileList || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>
                    </el-col>
                </el-row>
                <el-row class="marginTop20" align="center" v-if="returnBoxTypeValue == 15">
                    <el-col :span="5" class="_asterisk">预计还箱日期：</el-col>
                    <el-col :span="10">{{formatDate(txjlInfo.planReturnDate,2)}}</el-col>
                </el-row>
                <el-row class="marginTop20 _asterisk" v-if="returnBoxTypeValue == 15">
                    <el-col :span="3">到站运单：</el-col>
                    <el-col :span="24" class="marginTop5">
                        <ImgUpload ref="packingRef6" :urlList="JSON.parse(txjlInfo.arrivalWaybill || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>
                    </el-col>
                </el-row>
                <el-row class="marginTop20" v-if="returnBoxTypeValue == 15">
                    <el-col :span="3">转关单：</el-col>
                    <el-col :span="24" class="marginTop5">
                        <ImgUpload ref="packingRef7" :urlList="JSON.parse(txjlInfo.turnCustomBill || '[]')" :hideUpload="true" :displayType="0" :fileSize="5" :showNumber="6" :type="'jpg/png/jpeg/pdf/zip'" :limit="10" :drag="true"></ImgUpload>
                    </el-col>
                </el-row>
            </template>
        </template>
        <el-row class="marginTop50" v-if="showType == 'apply' || showType =='batchApply'">
            <el-col :span="23" class="text-right">
                <el-button type="primary" @click="submitApplication">确认</el-button>
            </el-col>
        </el-row>
   </el-drawer>
   <!-- 编辑提箱记录 -->
   <el-drawer v-model="editTxjlDialog" v-if="editTxjlDialog" :with-header="false" @close="handleDialogClose" size="40%">
        <el-row>
            <el-col :span="12"><span class="_before">编辑提箱记录</span></el-col>
            <template v-if="businessRoleEnum == 5">
                <el-col :span="12" class="text-right"><el-button type="primary" plain size="small" @click="hxApply('apply','other')">还箱申请</el-button></el-col>
            </template>
        </el-row>
        <el-row class="marginTop20" align="middle">
            <el-col :span="3" class="text-right">箱号：</el-col><el-col :span="8">{{containerInfo.containerNo}}</el-col>
            <el-col :span="3" class="text-right">堆场名称：</el-col><el-col :span="8">{{containerInfo.yardName}}</el-col>
            <el-col :span="3" class="text-right marginTop20">箱型：</el-col><el-col :span="7" class="marginTop20">{{basicConfig.boxTypeInfo1[containerInfo.boxType]}}</el-col>
            <el-col :span="3" class="text-right marginTop20">箱况：</el-col><el-col :span="7" class="marginTop20">{{basicConfig.boxConditionInfo2[containerInfo.boxCondition]}}</el-col>
        </el-row>
        <el-row class="marginTop20" align="middle">
            <el-col :span="3" class="text-right">提箱日期：</el-col><el-col :span="7">{{formatDate(containerInfo.packingDate,2)}}</el-col>
            <el-col :span="3" class="text-right">车牌号：</el-col><el-col :span="10"><el-input v-model="containerInfo.plateNumber"></el-input></el-col>
            <template v-if="businessRoleEnum == 10">
                <el-col :span="3" class="text-right marginTop20">成本价：</el-col>
                <el-col :span="7" class="marginTop20 rentInPrice">
                    <el-input v-model="containerInfo.rentInPrice" :parser="parserNumber" :formatter="formatterNumber">
                        <template #prefix>
                            <el-select v-model="containerInfo.rentInCurrency" style="width: 60px;">
                                <el-option label="$" value="USD"></el-option>
                                <el-option label="￥" value="CNY"></el-option>
                            </el-select>
                        </template>
                    </el-input>
                </el-col>
            </template>
        </el-row>
        <el-row class="marginTop20">
            <el-col :span="3" class="text-right">箱属：</el-col>
            <el-col :span="20">{{containerInfo.boxOwnerContent}}
                <!-- <el-input v-model="containerInfo.boxOwnerContent" type="textarea" maxlength="500" show-word-limit  rows="5" placeholder="请输入"></el-input> -->
            </el-col>
        </el-row>
        <el-row class="marginTop20">
            <el-col :span="3" class="text-right">提箱照片：</el-col>
            <el-col :span="20">
                <ImgUpload ref="packingRef4" :urlList="JSON.parse(containerInfo.detailFileList || '[]')" :limit="10" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="4"></ImgUpload>
            </el-col>
        </el-row>
        <el-row class="marginTop50">
            <el-col :span="24" class="text-center"><el-button type="primary" @click="submitEditHxjl">确认</el-button></el-col>
        </el-row>
   </el-drawer>
   <!-- 开提箱单 -->
    <el-drawer v-model="pickUpListDialog"  v-if="pickUpListDialog" size="40%" :show-close="false" :with-header="false"> 
        <el-row>
            <el-col :span="6">
            <span class="_before">开提箱单</span>
            </el-col>
        </el-row>
        <template v-if="showPackingType">
            <el-row align="middle">
                <el-col :span="4"><redStar />提箱单类型</el-col>
                <el-col :span="8" >
                    <el-radio-group v-model="packingType">
                        <el-radio value = "5" size="large">自有箱</el-radio>
                        <el-radio value = "15" size="large">外调箱</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
        </template>
        <OwnBox v-if="packingType == '5'" ref="ownboxRef" :packingInfo="packingInfo"  :orderType="5" :tag="'tx'" @closeDialog="closeDialog"></OwnBox> 
        <!--自有箱-->
        <ExternalBox v-if="packingType == '15'" ref="externboxlRef" :packingInfo="packingInfo" :orderType="5" :tag="'tx'" @closeDialog="closeDialog"></ExternalBox>
    </el-drawer>
    <!-- 查看提箱预览 -->
   <el-dialog v-model="previewListDialog" width="1000">
       <span class="_before">查看提箱记录</span>
       <el-table :data="pickupRecord" border class="marginTop20">
           <el-table-column prop="containerNo" label="箱号" width="150" align="center"/>
           <el-table-column prop="boxType" label="箱型" width="80" align="center">
               <template #default="scope">
                   {{basicConfig.boxTypeInfo1[scope.row.boxType]}}
               </template>
           </el-table-column>
           <el-table-column prop="boxCondition" label="箱况" width="80" align="center">
               <template #default="scope">
                   {{basicConfig.boxConditionInfo2[scope.row.boxCondition]}}
               </template>
           </el-table-column>
           <el-table-column prop="packingDate" label="提箱日期" width="150" align="center">
               <template #default="scope">
                   {{formatDate(scope.row.packingDate,2)}}
               </template>
              
           </el-table-column>
           <el-table-column prop="buyBoxCompanyName" label="客户"  align="center"/>
       </el-table>
   </el-dialog>
   <!-- 添加提箱记录 -->
   <el-drawer v-model="addPickupRecordDialog" :destroy-on-close="true" :with-header="false" size="40%" @closed="resetForm">
        <el-row align="center">
            <el-col :span="12"><span class="_before">新增箱照</span></el-col>
            <!-- <el-col :span="12" class="text-right"><el-button type="primary" plain size="small">继续添加</el-button></el-col> -->
        </el-row>
       <el-form ref="ruleRef" :model="pickupRecordList" :rules="rules" label-width="100px" class="marginTop20">
            <el-form-item label="选择订单" prop="yardName">
               <el-table ref="orderListref" :data="pickupRecordList.orderList" @selection-change="handleSelectionChange" style="width: 100%">
                   <el-table-column type="selection" width="55" align="center" />
                   <el-table-column label="订单号" prop="orderNo" width="200" align="center"/>
                   <el-table-column label="下单日期" prop="orderTime" width="120" align="center">
                       <template #default="scope">{{formatDate(scope.row.orderTime,2)}}</template>
                   </el-table-column>
                   <el-table-column label="已提箱量" prop="packedQuantity" align="center"  width="120">
                        <template #header>
                            <el-tooltip content="已提箱量" effect="dark" placement="top">
                                <span>已提箱量<el-icon class="el-icon--right"><QuestionFilled /></el-icon></span>
                            </el-tooltip>
                        </template>
                        <template #default="scope">{{ scope.row.packedQuantity }}</template>
                   </el-table-column>
                   <el-table-column label="未提箱量" align="center" width="120">
                        <template #header>
                            <el-tooltip content="未提箱量" effect="dark" placement="top">
                                <span>未提箱量<el-icon class="el-icon--right"><QuestionFilled /></el-icon></span>
                            </el-tooltip>
                        </template>
                       <template #default="scope">{{ scope.row.totalQuantity - scope.row.packedQuantity }}</template>
                   </el-table-column>
               </el-table>
           </el-form-item>
           <el-form-item label="提箱单号">{{ pickupRecordList.packingNo }}</el-form-item>
           <el-form-item label="箱型">{{ basicConfig.boxTypeInfo1[pickupRecordList.boxType] }} </el-form-item>
           <el-form-item label="箱况">{{ basicConfig.boxConditionInfo2[pickupRecordList.boxCondition] }}</el-form-item>
           <el-form-item label="堆场名称" prop="yardName">{{pickupRecordList.yardName}}</el-form-item>
           <el-form-item v-if="businessRoleEnum == 10" label="成本价：" class="rentInPrice"> 
                <el-input v-model="pickupRecordList.rentInPrice" :parser="parserNumber" :formatter="formatterNumber" style="width: 50%;">
                    <template #prefix>
                        <el-select v-model="pickupRecordList.rentInCurrency" style="width: 60px;">
                            <el-option label="$" value="USD"></el-option>
                            <el-option label="￥" value="CNY"></el-option>
                        </el-select>
                    </template>
                </el-input>
            </el-form-item>
           <el-form-item label="提箱日期" prop="packingDate">
               <el-date-picker v-model="pickupRecordList.packingDate" type="date" :editable="false" :clearable="false" placeholder="选择日期" :default-value="new Date()" style="width: 50%;" />
           </el-form-item>
           <el-form-item label="箱号" prop="containerNo">
               <el-input v-model.trim="pickupRecordList.containerNo" style="width: 50%;"></el-input>
           </el-form-item>
           <el-form-item label="车牌号" prop="plateNumber">
               <el-input v-model.trim="pickupRecordList.plateNumber" :maxlength="100" show-word-limit></el-input>
           </el-form-item>
         
           <el-form-item>
               <template #label>
                    <span :class="porps.businessRoleEnum==5?'_asterisk':''">提箱照片</span>
                </template>
               <ImgUpload ref="packingRef1" :type="'jpg/png/jpeg/pdf/zip'" :showNumber="6" :displayType="3" :limit="10" :drag="true"></ImgUpload>
           </el-form-item>
           <el-row class="marginTop30">
                <el-col :span="24" class="text-center"><el-button type="primary" @click="handleAddPackingDetail">确定</el-button></el-col>
                <el-col :span="24" v-if="showTips" class="text-center" style="color:#dfa255;font-size:12px">弹窗外空白处点击，即可关闭当前弹窗</el-col>
           </el-row>
       </el-form>
   </el-drawer>
   <!-- 财务 -> 费用 -->
   <el-drawer v-model="displayCostDialog" :destroy-on-close="true" :with-header="false" size="60%">
        <span class="_before">财务</span>
        <el-collapse v-model="activeNames" class="marginTop20" @change="handleChange">
            <el-collapse-item title="搜索条件" name="1" :icon="CaretRight">
                <el-form :model="displayCostSearch" :inline="true" label-width="60px">
                    <template v-if="activeName == 'fy'">
                        <el-form-item style="width:180px">
                            <div>箱号</div>
                            <MultipleBoxNumbersDialog v-model.trim="displayCostSearch.containerNo" :multipleBoxInfo="customBoxInfo"/>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>业务编号</div>
                            <el-input v-model.trim = "displayCostSearch.businessNo" size="small"></el-input>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>业务类型</div>
                            <el-select v-model="displayCostSearch.refType" size="small">
                                <el-option v-for="(item,index) in basicConfig.refTypeList" :key="index" :value="item.value" :label="item.label"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>状态</div>
                            <el-select v-model="displayCostSearch.writeOffStatus" size="small">
                                <el-option label="未建账单" value="5"/>
                                <el-option label="已建账单" value="10"/>
                                <el-option label="已对账" value="15"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>费用名称</div>
                            <el-select v-model="displayCostSearch.feeCode" size="small">
                                <el-option v-for="(item,index) in basicConfig.expenseType" :key="index" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>结算单位</div>
                            <el-input v-model="displayCostSearch.settlementCompanyName" size="small"></el-input>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <!-- <el-button size="small">重置</el-button>
                            <el-button type="primary" size="small" plain>搜索</el-button> -->
                        </el-form-item>
                    </template>
                    <template v-else-if="activeName == 'zd'">
                        <el-form-item style="width:180px">
                            <div>箱号</div>
                            <MultipleBoxNumbersDialog v-model.trim="displayCostSearch.containerNo" :multipleBoxInfo="customBoxInfo"/>
                        </el-form-item>
                        <el-form-item  prop="billNo" style="width:180px">
                            <div>账单编号</div>
                            <el-input v-model.trim="displayCostSearch.billNo" size="small" clearable/>
                        </el-form-item>
                        <el-form-item  prop="businessNo" style="width:180px">
                            <div>业务编号</div>
                            <el-input v-model.trim="displayCostSearch.businessNo" size="small" clearable/>
                        </el-form-item>
                        <el-form-item  prop="refType" style="width:180px">
                            <div>业务类型</div>
                            <el-select v-model="displayCostSearch.refType" size="small" clearable style="width: 100%;" placeholder="请选择业务类型">
                                <el-option v-for="(item,index) in basicConfig.refTypeList" :key="index" :value="item.value" :label="item.label"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item  prop="billType" style="width:180px">
                            <div>账单类型</div>
                            <el-select v-model="displayCostSearch.billType" size="small" clearable style="width: 100%;" placeholder="请选择账单类型">
                                <el-option v-for="item in basicConfig.billList" :key="item.value" :label="item.label" :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item  prop="billStatus" style="width:180px">
                            <div>账单状态</div>
                            <el-select v-model="displayCostSearch.billStatus"  size="small" clearable style="width: 100%;" placeholder="请选择账单状态">
                                <el-option v-for="item in basicConfig.billStatus1" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item  prop="settlementCompanyName" style="width:180px">
                            <div>结算单位</div>
                            <el-input v-model.trim="displayCostSearch.settlementCompanyName" size="small" clearable/>
                        </el-form-item>
                        <el-form-item  prop="settlementDirection" style="width:180px">
                            <div>结算流向</div>
                            <el-select v-model="displayCostSearch.settlementDirection" size="small" clearable style="width: 100%;" placeholder="请选择结算流向">
                                <el-option label="应收" value="1"/>
                                <el-option label="应付" value="-1"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width:395px">
                            <div>核销日期</div>
                            <el-date-picker v-model="displayCostSearch.beginWriteOffDate" size="small" clearable type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>
                        <el-form-item style="width:395px">
                            <div>创建日期</div>
                            <el-date-picker v-model="displayCostSearch.beginCreateDate" size="small" clearable type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" />
                        </el-form-item>
                    </template>
                    <template v-else-if="activeName == 'fp'">
                        <el-form-item style="width:180px">
                            <div>账单号</div>
                            <el-input v-model.trim="displayCostSearch.invoiceOrder" clearable size="small"></el-input>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>结算流向</div>
                            <el-select v-model="displayCostSearch.invoiceDirection" clearable size="small">
                                <el-option label="收款" value="1"/>
                                <el-option label="付款" value="-1"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>结算单位</div>
                            <el-input v-model.trim="displayCostSearch.invoiceOrder" clearable size="small"></el-input>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>发票号</div>
                            <el-input v-model.trim="displayCostSearch.invoiceNo" clearable size="small"></el-input>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>发票状态</div>
                            <el-select v-model="displayCostSearch.invoiceStatus" clearable size="small">
                                <el-option v-for="item in DATA_invoiceStatuss" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>纳税人识别号</div>
                            <el-input v-model.trim="displayCostSearch.creditCode" clearable placeholder="请输入" size="small"> </el-input>
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>申请日期</div>
                            <el-date-picker v-model="displayCostSearch.createDate" clearable type="daterange" size="small" range-separator="~" start-placeholder="开始日期"
                            end-placeholder="结束日期" />
                        </el-form-item>
                        <el-form-item style="width:180px">
                            <div>发票类型</div> 
                            <el-select v-model="displayCostSearch.invoiceType" clearable  size="small"style="width:100%" placeholder="请选择">
                                <el-option label="增值税普通发票" value="5"/>
                                <el-option label="增值税专用发票" value="10"/>
                            </el-select>
                        </el-form-item>
                    </template>
                    <el-form-item style="width:180px">
                        <div class="text-right" style="width: 100%;margin-bottom: -20px;">
                            <el-button size="small" @click="getRestFrom">重置</el-button>
                            <el-button type="primary" size="small" plain @click="submitSearch">搜索</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
        </el-collapse>
        <el-row class="marginTop20" align="middle">
            <el-col :span="12">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <template v-if="businessRoleEnum == 10">
                        <el-tab-pane label="费用" name="fy"></el-tab-pane>
                    </template>
                    <el-tab-pane label="账单" name="zd"></el-tab-pane>
                    <el-tab-pane label="发票" name="fp"></el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="12" class="text-right">
                <!-- <el-button type="primary" plain size="small">全选</el-button> -->
                <template v-if="activeName == 'fy' || activeName == 'fp'">
                    <el-button type="primary" plain size="small" @click="exportFinanceList">导出</el-button>
                </template>
                <template v-if="activeName == 'fy'">
                    <el-button type="primary" plain size="small" @click="createBill">新建账单</el-button>
                </template>
            </el-col>
        </el-row>
        <el-table :data="financeInfo" @selection-change="cwSelectionChange">
            <template v-if="activeName == 'fy'"> 
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column prop="businessNo" label="业务编号" align="center" width="190" />
                <el-table-column prop="refNo" label="箱号" align="center" width="120" />
                <el-table-column prop="settlementDirection" label="结算流向" align="center" width="100">
                    <template #default="scope">
                        <template v-if="scope.row.settlementDirection == '-1'"><span style="color: #ff0000;">应付</span></template>
                        <template v-else-if="scope.row.settlementDirection == 1"><span style="color: #0cb70c;">应收</span></template>
                    </template>
                </el-table-column>
                <el-table-column prop="refType" label="业务类型" width="80" align="center">
                    <template #default="scope">{{basicConfig.refType[scope.row.refType]}}</template>
                </el-table-column>
                <el-table-column prop="feeCode" label="费用名称" width="100" align="center">
                    <template #default="scope">{{basicConfig.expenseType1[scope.row.feeCode]}}</template>
                </el-table-column>
                <el-table-column prop="deductAmount" label="金额" align="center" width="150">
                        <template #default="scope">
                            {{{'USD':'$','CNY':'￥'}[scope.row.feeCurrency]}}{{scope.row.deductAmount}}
                        </template>
                </el-table-column>
                <el-table-column prop="settlementCompanyName" label="结算单位" align="center" width="200">
                        <template #default="scope">
                            <el-tooltip :content="scope.row.settlementCompanyName" placement="top">
                                <span class="text-ellipsis">{{ scope.row.settlementCompanyName }}</span>
                            </el-tooltip>
                        </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注" align="center" width="200">
                    <template #default="scope">
                        <template v-if="scope.row.remark">
                            <el-tooltip :content="scope.row.remark" placement="top">
                                <span class="text-ellipsis">{{scope.row.remark}}</span>
                            </el-tooltip>
                            <br/>
                            <el-button link type="primary" size="small" @click="handleEditRemark('edit',scope.row,1)">查看备注</el-button>   
                        </template>
                        <template v-else>
                            <el-button link type="primary" size="small" @click="handleEditRemark('add',scope.row,1)">添加备注</el-button>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="writeOffStatus" label="状态" fixed="right" align="center">
                    <template #default="scope">
                            <template v-if="scope.row.writeOffStatus == 5"><span style="color: #ff0000;">未建账单</span></template>
                            <template v-else-if="scope.row.writeOffStatus == 10"><span style="color: #0cb70c;">已建账单</span></template>
                            <template v-else-if="scope.row.writeOffStatus == 15"><span>已对账</span></template>
                        </template>
                </el-table-column>
            </template>
            <template v-else-if="activeName == 'zd'">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column prop="businessNo" label="业务编号" align="center" width="200">
                    <template #default="scope">
                        <template v-if="scope.row.businessNo">
                            <el-tooltip :content="contentSplicing('businessNo',scope.row.businessNo)" placement="top">
                                <span class="text-ellipsis">{{contentSplicing('businessNo',scope.row.businessNo)}}</span>
                            </el-tooltip>
                        </template>
                        <template v-else>--</template>
                    </template>
                </el-table-column>
                <el-table-column prop="billNo" label="账单编号" align="center" width="200">
                    <template #default="scope"><span style="color:#409EFF;text-decoration: underline;" @click="editPermissions(scope.row,2)">{{scope.row.billNo}}</span></template>
                </el-table-column>
                <el-table-column prop="refNo" label="箱号" align="center" width="120">
                    <template #default="scope">
                        <template v-if="scope.row.refNo">
                            <el-tooltip :content="contentSplicing('refNo',scope.row.refNo)" placement="top">
                                <span class="text-ellipsis">{{contentSplicing('refNo',scope.row.refNo)}}</span>
                            </el-tooltip>
                        </template>
                        <template v-else>--</template>
                    </template>
                </el-table-column>
                <el-table-column prop="refType" label="业务类型" align="center" width="80">
                    <template #default="scope">{{basicConfig.refType[scope.row.refType]}}</template>
                </el-table-column>
                 <el-table-column prop="billStatus" label="账单状态" align="center" width="100">
                    <template #default="scope">{{basicConfig.billStatus[scope.row.billStatus]}}</template>
                </el-table-column>
                <el-table-column prop="settlementDirection" label="结算流向" align="center" width="100">
                    <template #default="scope">
                        <template v-if="scope.row.settlementDirection == '-1'"><span style="color: #ff0000;">应付</span></template>
                        <template v-else-if="scope.row.settlementDirection == 1"><span style="color: #0cb70c;">应收</span></template>
                    </template>
                </el-table-column>
                <el-table-column prop="deductBillUsdAmount" label="账单金额" align="center" width="150">
                    <template #default="scope">${{scope.row.deductBillUsdAmount}}|￥{{scope.row.deductBillCnyAmount}}</template>
                </el-table-column>
                <el-table-column prop="paidBillUsdAmount" label="已付金额" align="center" width="150">
                    <template #default="scope">${{scope.row.paidBillUsdAmount}}|￥{{scope.row.paidBillCnyAmount}}</template>
                </el-table-column>
                <el-table-column prop="paidBillUsdAmount" label="未付金额" align="center" width="150">
                    <template #default="scope">${{scope.row.unpaidBillUsdAmount}}|￥{{scope.row.unpaidBillCnyAmount}}</template>
                </el-table-column>              
                <el-table-column prop="settlementCompanyName" label="结算单位" align="center" width="220">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.settlementCompanyName" placement="top">
                            <span class="text-ellipsis">{{scope.row.settlementCompanyName}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="writeOffTime" label="核销日期" align="center" width="110">
                    <template #default="scope">{{formatDate(scope.row.writeOffTime,2)}}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期" align="center" width="100">
                    <template #default="scope">{{formatDate(scope.row.createTime,2)}}</template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120" fixed="right" v-if="companyRole=='putBox'">
                    <template #default="scope">
                        <template v-if="scope.row.billStatus == 5">
                            <el-button link type="primary" size="small" @click="editPermissions(scope.row,1)">编辑</el-button>
                        </template>
                        <template v-if="scope.row.billStatus == 15 || scope.row.billStatus == 20">
                            <el-button link type="primary" size="small" @click="verificationTap(scope.row)">核销</el-button>
                        </template>
                        <template v-if="scope.row.billStatus == 5 || scope.row.billStatus == 15">
                            <el-button link type="danger" size="small" @click="revocationTap(scope.row)">撤销</el-button>
                        </template>
                        <template v-if="scope.row.billStatus == 15 || scope.row.billStatus == 20">
                            <el-button link type="primary" size="small" @click="invoiceRequest(scope.row)">申请发票</el-button>
                        </template>
                        <template v-if="scope.row.billStatus == 10 || scope.row.billStatus == 25">--</template>
                    </template>
                </el-table-column>
            </template>
            <template v-else-if="activeName == 'fp'">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column prop="invoiceNo" label="发票号" align="center" width="190" />
                <el-table-column prop="invoiceOrder" label="账单号" align="center" width="250">
                    <template #default="scope">
                        <template v-if="scope.row.invoiceOrder">
                            <el-tooltip :content="contentSplicing('billNo',scope.row.invoiceOrder)" placement="top">
                                <span class="text-ellipsis">{{contentSplicing('billNo',scope.row.invoiceOrder)}}</span>
                            </el-tooltip>
                        </template>
                        <template v-else>--</template>
                    </template>
                </el-table-column>
                <el-table-column prop="invoiceDirection" label="结算流向" align="center" width="80">
                    <template #default="scope">
                        <template v-if="scope.row.invoiceDirection == '-1'"><span style="color: #ff0000;">应付</span></template>
                        <template v-else-if="scope.row.invoiceDirection == 1"><span style="color: #0cb70c;">应收</span></template>
                    </template>
                </el-table-column>
                <el-table-column prop="invoiceTitle" label="结算单位" align="center" width="200">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.invoiceTitle" placement="top">
                            <span class="text-ellipsis">{{scope.row.invoiceTitle}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="creditCode" label="纳税人识别号" align="center" width="160" />
                <el-table-column prop="invoiceType" label="发票类型" align="center" width="140">
                    <template #default="scope">{{basicConfig.invoiceType[scope.row.invoiceType]}}</template>
                </el-table-column>
                <el-table-column prop="invoiceAmount" label="开票金额" align="center" width="120">
                    <template #default="scope">{{basicConfig.currency2[scope.row.payCurrency]}}{{scope.row.invoiceAmount}}</template>
                </el-table-column>
                <el-table-column prop="invoiceStatus" label="发票状态" align="center" width="100">
                    <template #default="scope">{{{ 5: '未申请', 10: '待开票', 15: '已开票' }[scope.row.invoiceStatus]}}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="申请日期" align="center" width="100">
                    <template #default="scope">{{formatDate(scope.row.invoiceStatus,2)}}</template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="190" fixed="right">
                    <template #default="scope">
                        <template v-if="scope.row.invoiceStatus >= 15">
                            <el-button link type="danger" size="small" @click="showInvoice(scope.row)">查看发票</el-button>
                        </template>
                        <template v-if="scope.row.invoiceStatus < 15">
                            <el-button link type="primary" size="small" @click="applyInvoice(scope.row)">开发票</el-button>
                        </template>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <!-- <el-pagination class="floatRight" :page-size="15" layout="prev, pager, next" :total="boxTotal" @current-change="currentChange"/> -->
   </el-drawer>
   <!-- 核销 -->
   <verificationModalForm ref="verificationModalMormRef"></verificationModalForm>
   <!-- 申请发票 -->
   <applyInvoiceFrom ref="applyInvoiceModalMormRef"></applyInvoiceFrom>
    <!-- 发票弹窗 -->
    <el-dialog v-model="invoiceDialog" @close="cancel">
        <template v-if="dialogType == 'view'"> <!--查看发票-->
            <pdfViewer v-for="(item,index) in invoiceUrlInfo" :key="index" :url="item.url"></pdfViewer>
        </template>
        <template v-else-if="dialogType == 'issue'"> <!--开发票-->        
            <span class="_before">开发票</span>
            <el-form label-width="200" style="margin: 50px 0 50px 100px;">
                <el-form-item label="企业抬头：">{{ invoice.invoiceTitle || '--'}}</el-form-item>
                <el-form-item label="统一社会信用代码：">{{ invoice.creditCode || '--' }}</el-form-item>
                <el-form-item label="发票：">
                    <imgUploadOcr ref="invoiceRef" :fileList="fileList1" :needOcr="true" :drag="false" @ocrInvoiceNo="ocrInvoiceNo" />
                </el-form-item>
                <el-form-item label="发票号：" style="width: 400px;">
                    <el-input v-model.trim="invoice.invoiceNo" placeholder="请输入发票号" />
                </el-form-item>
                <el-form-item label="发票类型：" style="width: 400px;">
                    <el-select v-model="invoice.invoiceType" clearable style="width:100%" placeholder="请选择">
                        <el-option v-for="item in basicConfig.invoiceType1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="发票金额：" style="width: 400px;">
                    <el-input v-model.trim="invoice.invoiceAmount" :formatter="formatterNumber" :parser="parserNumber"  placeholder="请输入发票金额" />
                </el-form-item>
            </el-form>
            <el-row>
                <el-col :span="24" class="text-center"><el-button  @click="handleSubmit('issue')" type="primary">提交</el-button></el-col>
            </el-row>
        </template>
    </el-dialog>
    <!-- 查看还箱单 -->
    <el-drawer v-model="hxdDialog" :with-header="false" size="50%">
        <span class="_before">还箱</span>
        <el-row class="marginTop20" align="middle">
        <el-col :span="12">
            <el-tabs v-model="returnContainer" class="demo-tabs" @tab-change="viewReturnList(returnContainer)">
                <el-tab-pane label="还箱单" name="hxd"></el-tab-pane>
                <el-tab-pane label="还箱记录" name="hxjl"></el-tab-pane>
            </el-tabs>
        </el-col>
        <template v-if="returnContainer == 'hxd'">
            <el-col :span="12">
            <el-row justify="end">
                    <el-col :span="4" class="text-center"><el-button type="primary" plain size="small" @click="exportBoxList">导出</el-button></el-col>
                    <template v-if="businessRoleEnum == 10">
                        <el-col :span="4" class="text-center"><el-button type="primary" plain size="small" @click="returnCredentials('hxd')">开还箱单</el-button></el-col>
                        <el-col :span="4" class="text-center"><el-button type="primary" plain size="small" @click="returnCredentials('hxl')">开还箱令</el-button></el-col>
                        <el-col :span="4" class="text-center"><el-button type="primary" plain size="small" @click="returnCredentials('xs')">开箱属</el-button></el-col>
                    </template>
                </el-row>
            </el-col>
        </template>
        <template v-if="returnContainer == 'hxjl'">
                <el-col :span="12">
                    <el-row justify="end" v-if="businessRoleEnum == 10">
                        <el-col :span="4" class="text-center"><el-button type="primary" plain size="small" @click="returnReminderdialog = true">还箱</el-button></el-col>
                    </el-row>
                </el-col>
        </template>
        </el-row>
        <template v-if="returnContainer == 'hxd'">
            <el-table :data="returnDocuments" class="marginTop20" @selection-change="hxdSelectionChange"> 
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column prop="returnBoxNo" label="单据号" align="center" width="180">
                    <template #default="scope">
                        <span class="clickable-cell" @click="handleBoxNoClick(scope.row)">{{ scope.row.returnBoxNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="returnBoxType" label="单据类型" align="center" width="80">
                    <template #default="scope">
                    {{basicConfig.returnBoxType[scope.row.returnBoxType]}}
                </template>
                </el-table-column>
                <el-table-column prop="yardName" label="堆场名称" align="center" width="150" />
                <!-- <el-table-column prop="residueReturnDays" label="剩余还箱天数" align="center" width="120" /> -->
                <el-table-column prop="totalReturnQuantity" label="总箱量" align="center" width="100" />
                <el-table-column prop="returnedQuantity" label="已还箱量" align="center" width="100" />
                <el-table-column prop="boxWeight" label="未还箱量" align="center" width="100">
                    <template #default="scope">
                    {{scope.row.totalReturnQuantity - scope.row.returnedQuantity}}
                </template>
                </el-table-column>
                <el-table-column prop="boxWeight" label="操作" fixed="right" align="center" width="100">
                    <template #default="scope">
                        <template v-if="scope.row.returnBoxType != 10">
                            <el-button link type="primary" size="small" @click="downloadAtta1(scope.row)">下载</el-button>
                        </template>
                    <el-button link type="primary" size="small" @click="handleBoxNoClick(scope.row)">预览</el-button>
                    <!-- <el-button link type="primary" size="small" @click="returnRecord">新增</el-button> -->
                </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-else-if="returnContainer == 'hxjl'">
            <el-table :data="returnDocumentsJL" class="marginTop20" @selection-change="hxjlSelectionChange">
                <el-table-column type="selection" width="55" align="center"/>
                <el-table-column prop="containerNo" label="箱号" align="center" width="120" />
                <el-table-column prop="boxType" label="箱型" align="center" width="80">
                    <template #default="scope">{{basicConfig.boxTypeInfo1[scope.row.boxType]}}</template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="80">
                    <template #default="scope">
                        <template v-if="scope.row.status == 5"><span style="color:#ff0000">未还</span></template>
                        <template v-else-if="scope.row.status == 10" ><span style="color:#0cb70c">已还</span></template>
                    </template>
                </el-table-column>
                <el-table-column prop="returnDate" label="还箱日期" align="center" width="120">
                    <template #default="scope">
                        <template v-if="scope.row.returnDate">{{formatDate(scope.row.returnDate,2)}}
                            <template v-if="scope.row.status < 10"><el-icon @click="handleEdit('edit',scope.row)"><EditPen/></el-icon></template>
                        </template>
                        <template v-else><el-icon @click="handleEdit('add',scope.row)"><FolderAdd /></el-icon></template>
                    </template>
                </el-table-column>
                <el-table-column prop="useDays" label="用箱天数" align="center" width="80">
                    <template #default="scope">{{scope.row.useDays || '--'}}</template>
                </el-table-column>
                <el-table-column prop="overdueDays" label="超期天数" align="center" width="80">
                    <template #default="scope">{{scope.row.overdueDays || '--'}}</template>
                </el-table-column>
                <el-table-column prop="yardName" label="堆场名称" align="center" width="180"/>
                <el-table-column v-if="businessRoleEnum == 10" prop="outBoxCompanyName" label="集装箱公司" align="center" width="180">
                    <template #default="scope">
                        <template v-if="scope.row.outBoxCompanyName">{{scope.row.outBoxCompanyName}}</template>
                        <template v-else>--</template>
                    </template>
                </el-table-column>
                
                <el-table-column prop="remark" label="备注" align="center" width="180">
                    <template #default="scope">
                        <el-tooltip :content="scope.row.remark" placement="top">
                            <span class="text-ellipsis">{{scope.row.remark}}</span>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="orderNo" label="订单号" align="center" width="200"/>
                <el-table-column prop="returnBoxNo" label="还箱单号" align="center" width="200"/>
                <el-table-column label="操作" align="center" width="200" fixed="right">
                    <template #default="scope">
                        <template v-if="businessRoleEnum == 10">
                            <template v-if="scope.row.detailFileList && scope.row.detailFileList.length > 2">
                                <el-button link type="primary" size="small"  @click="uploadReturn('edit',scope.row)">查看凭证</el-button>
                            </template>
                            <template v-else>
                                <el-button link type="primary" size="small"  @click="uploadReturn('add',scope.row)">上传凭证</el-button>
                            </template>
                        </template>
                        <template v-else-if="businessRoleEnum == 5">
                            <template v-if="scope.row.fileList && scope.row.fileList.length > 2">
                                <el-button link type="primary" size="small" @click="uploadReturn('edit',scope.row)">查看凭证</el-button>
                            </template>
                            <template v-else>
                                <el-button link type="primary" size="small" @click="uploadReturn('add',scope.row)">上传凭证</el-button>
                            </template>
                        </template>
                        <template v-if="scope.row.remark">
                            <el-button link type="primary" size="small" @click="handleEditRemark('edit',scope.row,2)">修改备注</el-button>
                        </template>
                        <template v-else>
                            <el-button link type="primary" size="small" @click="handleEditRemark('add',scope.row,2)">查看备注</el-button>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </el-drawer>
    <!-- 还箱单详情 -->
    <el-drawer v-model="hxdInfoDialog" :with-header="false" size="50%">
        <span class="_before" v-if="hxdInfo.returnBoxType == 10">箱属</span>
        <span class="_before" v-if="hxdInfo.returnBoxType == 5">还箱单</span>
        <span class="_before" v-if="hxdInfo.returnBoxType == 15">还箱令</span>
        <el-row class="marginTop20">
            <el-col :span="12">
                <template v-if="businessRoleEnum == 5">箱东公司：{{hxdInfo.companyName}}</template> <!--货代-->
                <template v-if="businessRoleEnum == 10">客户：{{hxdInfo.agentName}}</template> <!--箱东-->
               </el-col>
            <el-col :span="12">还箱单号：{{hxdInfo.returnBoxNo}}</el-col>
            <el-col :span="12" class="marginTop10">箱型量：{{boxVolumeSp(hxdInfo)}}</el-col>
            <el-col :span="12" class="marginTop10">箱号：
                <template v-for="(item,index) in JSON.parse(hxdInfo.containerNoList)" :key="index">
                    {{item.containerNo}}<template v-if="((JSON.parse(hxdInfo.containerNoList).length) -1) != index">、</template>
                </template>
            </el-col>
            <el-col :span="24" class="marginTop10" v-if="hxdInfo.returnBoxType == 5 || hxdInfo.returnBoxType == 15">
                箱令内容：{{hxdInfo.boxOwnerContent || '--'}} <el-icon  @click="copyText(hxdInfo.boxOwnerContent)"><DocumentCopy style="color: #2158f3;"/></el-icon> 
            </el-col>
            <el-col :span="24" class="marginTop10" v-if="hxdInfo.returnBoxType == 10">
                箱属内容:{{hxdInfo.boxOwnerContent}} <el-icon  @click="copyText(hxdInfo.boxOwnerContent)"><DocumentCopy style="color: #2158f3;"/></el-icon> 
            </el-col>
            <el-col :span="12" class="marginTop10">堆场名称：{{hxdInfo.yardName}}</el-col><el-col :span="12" class="marginTop10">堆场地址：{{hxdInfo.yardAddress}}</el-col>
            <template v-if="hxdInfo.returnBoxType != 10">
                <el-col :span="12" class="marginTop10">堆场联系人：{{hxdInfo.yardContact}}</el-col><el-col :span="12" class="marginTop10">堆场电话：+{{hxdInfo.areaCode}}-{{hxdInfo.yardTel}}</el-col>
            </template>
            <el-col :span="12" class="marginTop10">堆场作业时间：{{hxdInfo.yardWorkTime}}</el-col>
            <template v-if="hxdInfo.returnBoxType == 15">
                <el-col :span="12" class="marginTop10">还箱指令号：{{hxdInfo.instruction}}</el-col>
            </template>
           
            <el-col :span="24" class="marginTop10">状态：{{basicConfig.returnBoxStatus[hxdInfo.status]}}</el-col>
            <el-col :span="24" class="marginTop10">备注：{{hxdInfo.remark || '--'}}</el-col>
            <el-col :span="24" class="marginTop10">
                <el-row>
                    <el-col :span="2">附件：</el-col>
                    <el-col :span="19">
                        <ImgUpload ref="addBoxFileRef1" :urlList="JSON.parse(hxdInfo.pdfFile)|| []" :hideUpload="true" :displayType="0" :fileSize="3" :showNumber="4" :type="'pdf/doc/docx/xls/xlsx/jpg/jpeg/png/zip'" :limit="10" :drag="true"></ImgUpload>
                    </el-col>
                </el-row>
            </el-col>
           
        </el-row>
    </el-drawer>
    <!-- 添加/修改还箱日期 -->
    <el-dialog v-model="returnDateDialog" :title="thisOpt == 'add' ? '添加还箱日期' : '修改还箱日期'" width="300">
        <div style="width: 100%;text-align: center;margin-top: 20px;">
            <el-date-picker v-model="returnDateSync" type="date" style="text-align: center;"></el-date-picker>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 40px;">
            <el-button type="primary" @click="handleReturnDate" plain style="width:100px">确定</el-button>
        </div>
    </el-dialog>
    <!-- 添加/修改备注 -->
    <el-dialog v-model="dialogVisibleRemark" :title="thisOpt == 'edit' ? '修改备注' : '添加备注'" width="300">
        <div style="width: 100%;text-align: center;margin-top: 20px;">
            <el-input v-model="remarkValSync" type="textarea" show-word-limit maxlength="200" rows="2"></el-input>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 40px;">
            <el-button type="primary" @click="handleRemark" plain style="width:100px">确定</el-button>
        </div>
    </el-dialog>
    <!-- 上传附件-->
    <el-dialog v-model="dialogPitchUploadVisible" :title="thisOpt == 'add' ? '添加附件' : '修改附件'" style="width: 800px;">
        <template v-if="thisOpt == 'add'">
            <template v-if="businessRoleEnum == 10">   
                <ImgUpload ref="uploadFileRefXD" :limit="6" :urlList="uploadUrlListXD" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="6"></ImgUpload>
                <h4>货代凭证</h4>
                <template v-if="uploadUrlListHD.length > 0">
                    <ImgUpload ref="uploadFileRefHD" :limit="6" :urlList="uploadUrlListHD" :hideUpload="true" :type="'jpg/png/jpeg/pdf/zip'" :displayType="0" :drag="true" :showNumber="6"></ImgUpload>
                </template>
                <template v-else>
                    <p style="color: #dfa255;padding-left: 20px;font-size: 12px;">暂无凭证</p>
                </template>
            </template>
            <template v-else-if="businessRoleEnum == 5">
                <ImgUpload ref="uploadFileRefHD" :limit="6" :urlList="uploadUrlListHD" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="6"></ImgUpload>
                <h4>箱东凭证</h4>
                <template v-if="uploadUrlListXD.length > 0">
                    <ImgUpload ref="uploadFileRefXD" :limit="6" :urlList="uploadUrlListXD" :hideUpload="true" :type="'jpg/png/jpeg/pdf/zip'" :displayType="0" :drag="true" :showNumber="6"></ImgUpload>  
                </template>
                <template v-else>
                    <p style="color: #dfa255;padding-left: 20px;font-size: 12px;">暂无凭证</p>
                </template>
            </template>
        </template>
        <template v-else-if="thisOpt == 'edit'">
            <template v-if="businessRoleEnum == 10">   
                <h4>凭证上传</h4>
                <ImgUpload ref="uploadFileRefXD" :limit="6" :urlList="uploadUrlListXD" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="6"></ImgUpload>
                <h4>货代凭证</h4>
                <template v-if="uploadUrlListHD.length > 0">
                    <ImgUpload ref="uploadFileRefHD" :limit="6" :urlList="uploadUrlListHD" :hideUpload="true" :type="'jpg/png/jpeg/pdf/zip'" :displayType="0" :drag="true" :showNumber="6"></ImgUpload>
                </template>
                <template v-else>
                    <p style="color: #dfa255;padding-left: 20px;font-size: 12px;">暂无凭证</p>
                </template>
            </template>
            <template v-if="businessRoleEnum == 5"> 
                <h4>凭证上传</h4>
                <ImgUpload ref="uploadFileRefHD" :limit="6" :urlList="uploadUrlListHD" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="6"></ImgUpload>
                <h4>箱东凭证</h4>
                <template v-if="uploadUrlListXD.length > 0">
                    <ImgUpload ref="uploadFileRefXD" :limit="6" :urlList="uploadUrlListXD" :hideUpload="true" :type="'jpg/png/jpeg/pdf/zip'" :displayType="0" :drag="true" :showNumber="6"></ImgUpload>  
                </template>
                <template v-else>
                    <p style="color: #dfa255;padding-left: 20px;font-size: 12px;">暂无凭证</p>
                </template>
            </template>
         </template>
        <div style="width: 100%;text-align: center;margin-top: 20px;">
            <el-button @click="handlePitchUpload" type="primary">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 开还箱令/箱属 -->
    <el-dialog v-model="credentialsDialog" v-if="credentialsDialog" destroy-on-close :before-close="hxDocumentClose">
            <span class="_before">
                <template v-if="credentialsType == 'hxl'">开还箱令</template>
                <template v-else-if="credentialsType == 'hxd'">开还箱单</template>
                <template v-else>开箱属</template>
            </span>
            <el-row class="marginTop20">
                <el-col :span="24">
                    <el-row>
                        <el-col :span="3" class="text-right"> <span class="_asterisk">箱号：</span></el-col><el-col :span="12" :offset="8" class="text-right"><el-button @click="choiceBox(1)" size="small" icon="edit">选择箱号</el-button></el-col>
                        <el-col :offset="3" :span="21">
                            <el-row>
                                <el-col v-for="(item,index) in selectBoxList" :span="4" :key="index" class="containerNo-border">{{item.containerNo}}</el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="24" class="marginTop10">
                    <el-row>
                        <el-col :span="3" class="text-right">箱型/箱量：</el-col>
                        <el-col :span="9">{{boxInfo}}</el-col>
                        <el-col :span="3" class="text-right">还箱城市：</el-col>
                        <el-col :span="9">
                            <el-tooltip :content="returnCityInfo" placement="top">
                                <span class="text-ellipsis">{{returnCityInfo}}</span>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12" class="marginTop10">
                    <el-row align="middle">
                        <el-col :span="6" class="text-right"> <span class="_asterisk">堆场名称：</span></el-col>
                        <el-col :span="16"><yardSelect ref="selectRef" @yardId="yardInfo" :selectName="'yardName'" :needInfo="true" style="width:100%"></yardSelect></el-col>
                    </el-row>
                </el-col>
                <el-col :span="12" class="marginTop10">
                    <el-row align="middle">
                        <el-col :span="6" class="text-right">堆场地址：</el-col>
                        <el-col :span="16"><el-input v-model="yardInfoData.yardAddress" disabled placeholder="请先选择堆场"></el-input></el-col>
                    </el-row>
                </el-col>
                <el-col :span="12" class="marginTop10">
                    <el-row align="middle">
                        <el-col :span="6" class="text-right">堆场作业时间：</el-col>
                        <el-col :span="16"><el-input v-model="yardInfoData.workTime" disabled placeholder="请先选择堆场"></el-input></el-col>
                    </el-row>
                </el-col>
                <template v-if="credentialsType == 'hxl' || credentialsType == 'hxd'">
                    <el-col :span="24" class="marginTop10">
                        <el-row  align="middle">
                            <el-col :span="3" class="text-right">还箱指令号：</el-col>
                            <el-col :span="20"><el-input v-model="instruction" placeholder="请输入指令号"></el-input></el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row  align="middle">
                            <el-col :span="3" class="text-right">有效期范围：</el-col>
                            <el-col :span="20">
                                <el-date-picker v-model="returnValidityPeriod" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;" />
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row  align="middle">
                            <el-col :span="3" class="text-right">联系人：</el-col>
                            <el-col :span="20">
                                <el-select v-model="yardContacts" placeholder="请选择联系人" @change="changeContacts">
                                    <el-option v-for="(item,index) in JSON.parse(yardInfoData.yardContacts || '[]')" :key="index" :label="item.contacts" :value="item.contacts"/>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row  align="middle">
                            <el-col :span="3" class="text-right">联系电话：</el-col>
                            <el-col :span="20"><el-input v-model="tel" disabled></el-input> </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row>
                            <el-col :span="3" class="text-right">箱令内容：</el-col>
                            <el-col :span="20"><el-input v-model="boxOwnerContent" type="textarea" maxlength="2000" show-word-limit  rows="5" placeholder="请输入"></el-input></el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row  align="middle">
                            <el-col :span="3" class="text-right">附件：</el-col>
                            <el-col :span="20">
                                <ImgUpload ref="packingRef3" :limit="10" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="6"></ImgUpload>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop20 text-center">
                        <el-button type="primary" @click="submitCredentials('hxl')">确认</el-button>
                    </el-col>
                </template>
                <template v-else-if="credentialsType == 'xs'">  
                    <el-col :span="24" class="marginTop10">
                        <el-row>
                            <el-col :span="3" class="text-right">箱属内容：</el-col>
                            <el-col :span="20"><el-input v-model="boxOwnerContent" type="textarea" maxlength="2000" show-word-limit  rows="5" placeholder="请输入"></el-input></el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop10">
                        <el-row>
                            <el-col :span="3" class="text-right">附件：</el-col>
                            <el-col :span="20">
                                <ImgUpload ref="packingRef2" :limit="10" :type="'jpg/png/jpeg/pdf/zip'" :displayType="3" :drag="true" :showNumber="6"></ImgUpload>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="marginTop20 text-center">
                        <el-button type="primary" @click="submitCredentials('xs')">确认</el-button>
                    </el-col>
                </template>
            </el-row>
    </el-dialog>
    <!-- 集装箱选择 -->
    <el-dialog v-model="choiceBoxDialog">
            <span class="_before">选择箱号</span>
            <el-input v-model="containerNoStr" placeholder="请输入箱号 HNKU0000000,HNKU0000000" @input="choiceBox(2)" class="marginTop20"></el-input>
            <el-table :data="choiceBoxData" border class="marginTop20"  @selection-change="handleSelection">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="containerNo" label="箱号" align="center" width="150"/>
                <el-table-column prop="boxType" label="箱型" align="center" width="80">
                    <template #default="scope">{{basicConfig.boxTypeInfo1[scope.row.boxType]}}</template>
                </el-table-column>
                <el-table-column prop="containerClassify" label="箱源" align="center" width="80">
                    <template #default="scope">{{basicConfig.containerClass[scope.row.containerClassify]}}</template>
                </el-table-column>
                <el-table-column prop="outBoxCompanyName" label="集装箱公司" align="center"/>
                <el-table-column prop="agentName" label="客户" align="center"/>
            </el-table>
            <el-row class="marginTop20">
                <el-col :span="24" class="text-center"><el-button type="primary" @click="submitSelection">确认</el-button></el-col>
            </el-row>
    </el-dialog>
    <!-- 还箱提示 -->
    <el-dialog v-model="returnReminderdialog" title="还箱提示" width="500">
        <span style="color: chocolate;">您确认要还箱吗？</span>
        <p>请确保还箱记录信息正确</p>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleReturnBox">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 新增账单弹窗 -->
    <add-modal-form ref="addModalMormRef"  @addModal="getFilterData"></add-modal-form>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch, computed, getCurrentInstance, nextTick} from 'vue'
import { saleBoxPage,saleBoxList } from '@/api/boxDeal/tiXiangManageDetail';
import MultipleBoxNumbersDialog from '@/components/dialog/multipleBoxNumbersDialog'
import { formatContainerNo } from '@/utils/mlpBox' // 格式化箱号
import { CaretRight,Edit } from '@element-plus/icons-vue'

import { showFullScreenLoading, tryHideFullScreenLoading } from '@/tools/el-loading'
import imgUploadOcr from '@/components/upload/index'
import ImgUpload from '@/components/upload/uploadFiles-Images'
import { hxRentBoxList, addReturn, exportBoxEastReturnBoxList,getReturnData } from '@/api/orderManage/returnBox' //还箱单
import {downloadFile as globalDownloadFile} from '@/utils/download'
import { hxjlRentBoxList,getDetailTable, updateReturnDate,updateReturnMark,updateDetailFile,updateAgentFile,finishReturnBoxDetail } from '@/api/orderManage/returnBoxDetail'
import yardSelect from '@/components/citySelect/yardSelect';
import { getTable as getBoxTable, returnPage } from '@/api/boxManage/index'
import { details, getRentBoxList,addPackingDetail, deletePackingDetail, returnApply,batchReturnApply} from '@/api/orderManage/packingDetail'
import { orderBoxQty,addPacking,rentBoxList, updatePackingInfoPdfFile ,getPackingData, finishPacking } from '@/api/orderManage/packing'
import OwnBox from '@/views/placingOrder/exportOrder/component/ownBox'
import ExternalBox from '@/views/placingOrder/exportOrder/component/externalBox';
import { ElMessage, ElLoading,ElMessageBox ,ElTable } from 'element-plus'
import pdfViewer from '@/components/pdf'
import { formatDate } from '@/utils'
import basicConfig from '@/constant/containerInfo'
import basicTools from '@/tools/index'
import { downloadIamge } from '@/utils/download'
import { selectFeeDetailsListByOrderId, updateFeeDetailsRemark,exporFeeDetails } from '@/api/financial/operatingInfo'
import { getInvoicePageNew, getInvoicesInfo, uploadingInvoice, exportInvoice } from '@/api/invoice/indexNew'
import { getRentBillListByOrderId, updateBillStatus } from '@/api/financial/bills'
import verificationModalForm from '@/views/financialManage/bills/components/verificationModalForm'
import applyInvoiceFrom from '@/views/financialManage/bills/components/applyInvoiceFrom'
import AddModalForm from '@/views/financialManage/operatingInfo/components/addModalForm'
import {DATA_invoiceStatuss} from '@/data/invoice.js'
import { useRouter } from 'vue-router'
// import { getOrderInfo } from '@/api/orderManage/index'
const customBoxInfo = {  //多箱号 提示信息
    placeholder1:'请输入',
    title:'输入箱号',
    placeholder2:'请输入多个箱号以英文逗号隔开',
    button:'多箱号',
    size:'small'
}
const hoveredStep1 = ref("hide") //show:显示 hide：隐藏
const hoveredStep2 = ref("hide") //show:显示 hide：隐藏
const hoveredStep3 = ref("hide") //show:显示 hide：隐藏
const hoveredStep4 = ref("hide") //show:显示 hide：隐藏
const hoveredStep5 = ref("hide") //show:显示 hide：隐藏
const hoveredStep6 = ref("hide") //show:显示 hide：隐藏

const active = ref(2)
const porps = defineProps({
   status:{
       type: Number,
       default: 2
   },
   orderData: {
       type: Object,
       default: () => { }
   },
   businessRoleEnum:{ // 5：买箱公司  10：卖箱公司
       type: Number,
       default: 0
   }
})
// 订单所处流程节点的 
//   30：已完成 35:已取消
   // active.value = 1 (下单) =>  2-待确认
   // active.value = 2（签署）=>  3:待签署 
   // active.value = 3（提箱）=>  5:待开提箱单 10:待提[待提未付/待提已付] 15:已提[已提未付/已提已付]
   // active.value = 4（还箱）=>  20：待还[待还已付/待还未付] 25：已还[已还已付/已还未付]
   // active.value = 5（财务）=>  
   // active.value = 6（完成）=>  30：已完成  40:待取消 45：已取消 
watch(() => porps.status,(newValue)=>{ 
    if(newValue < 3){
        active.value = 1 
    }else if(newValue >= 3 && newValue < 5){ 
        active.value = 2 
        hoveredStep2.value = 'show'
    }else if(newValue >= 5 && newValue < 20){
        active.value = 3 
        hoveredStep2.value = 'show'
        hoveredStep3.value = 'show'
    }else if(newValue >= 20 && newValue < 30){
        active.value = 4 
        hoveredStep2.value = 'show'
        hoveredStep3.value = 'show'
        hoveredStep4.value = 'show'
        hoveredStep5.value = 'show' 
    }else if( newValue >= 25 && newValue < 30){
        active.value = 5
        hoveredStep2.value = 'show'
        hoveredStep3.value = 'show'
        hoveredStep4.value = 'show'
        hoveredStep5.value = 'show' 
    }else if(newValue >= 30){
        hoveredStep2.value = 'show'
        hoveredStep3.value = 'show'
        hoveredStep4.value = 'show'
        hoveredStep5.value = 'show' 
        active.value = 6 
    }
    const cancellationStatus = porps.orderData.cancellationStatus
    if(newValue == 40 || newValue == 35){
        if(cancellationStatus < 3){
            active.value = 1 
        }else if(cancellationStatus >= 3 && cancellationStatus < 5){ 
            active.value = 2 
        }else if(cancellationStatus >= 5 && cancellationStatus < 20){
            active.value = 3 
        }else if(cancellationStatus >= 20 && cancellationStatus < 35){
            active.value = 4 
        }else if(cancellationStatus == 35){
            active.value = 5 
        }else if(cancellationStatus >= 35){
            active.value = 6 
        }

    }
},{immediate: true})
const pdfSource = computed(() => JSON.parse(porps.orderData.downloadUrl)?.url || '');
const constantDialog = ref(false);
const viewContract = () => { 
   const contractUrl = JSON.parse(porps.orderData.downloadUrl)?.url || ''
   if(!contractUrl) return ElMessage.warning('合同未生成，请先完成合同签署')
   constantDialog.value = true
}

// 
const tableLayout = ref("txd") // txd:显示提箱单 txjl:显示提箱记录
const containerDialog = ref(false);
const pickUpListData = ref([])
const allPickupRecord = ref([])
const viewContainer = async(lay:string) => { 
   if(lay == 'txd'){
       tableLayout.value = 'txd'
       await rentBoxList(porps.orderData.id).then(res => { 
           if(res.code == '00000'){
                tryHideFullScreenLoading()
                clearInterval(intervalId)
                pickUpListData.value = res.data
           }else{
               ElMessage.error(res.message)
           }
       }).catch((error) => {
       ElMessage.error(error)
       })      
   }else if(lay == 'txjl'){
       tableLayout.value = 'txjl'
       await getRentBoxList(porps.orderData.id).then(res => {
           if(res.code == "00000"){
               allPickupRecord.value = res.data
               porps.orderData.packedQuantity = res.data.length
               tryHideFullScreenLoading()
               clearInterval(intervalId)
           }
       })
   }
   containerDialog.value = true
}
const editTxjlDialog = ref(false)
const containerInfo = ref({id:'',plateNumber:'',boxOwnerContent:'',detailFileList:'',rentInPrice:'',rentInCurrency:'CNY'})
const packingRef4 = ref()
// 编辑提箱记录
const txjlInfo = ref({id:'',containerNo:'',returnCity:'',detailFileList:''})
const editTxjl = (info:any) => {
    containerInfo.value = info
    txjlInfo.value = info
    editTxjlDialog.value = true
}
// 删除提箱记录
const deleteTxjl = (row:any) => {
    ElMessageBox.confirm('删除之后无法恢复，请认真核对?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async() => {
        await deletePackingDetail(row.id).then((res:any) =>{
            if(res.code == '00000'){
                viewContainer('txjl')
                ElMessage.success("提箱记录删除成功！")
            }else{
                ElMessage.success(res.msg)
            }
        }).catch(error => {
            ElMessage.error(error)
        })
    }).catch(() => {
        ElMessage.info("取消删除")
     });
}
const submitEditHxjl = async() => {
    const data = {
        id: containerInfo.value.id,
        plateNumber: containerInfo.value.plateNumber,
        boxOwnerContent: containerInfo.value.boxOwnerContent,
        detailFileList: JSON.stringify(packingRef4.value.fileList),
        rentInPrice: containerInfo.value.rentInPrice,
        rentInCurrency: containerInfo.value.rentInCurrency
    }
    await details(data).then(res => {
        if(res.code == '00000'){
            ElMessage.success('提箱记录编辑成功')
        }else{
            ElMessage.warning(res.msg)
        }
    }).catch(error => {
        ElMessage.error(error)
    })
    editTxjlDialog.value = false
}
// 还箱申请
const hxApplyDialog = ref(false)
const returnBoxTypeValue = ref(10)
const planReturnDate = ref(new Date())
const packingRef5 = ref()
const packingRef6 = ref()
const packingRef7 = ref()
const showType = ref('apply')
const hxApply = (type:string,info:any) =>{ //apply:申请   view: 查看  batchApply:批量申请
    returnBoxTypeValue.value = 10
    planReturnDate.value = new Date()
    nextTick(() => {
        packingRef5.value?.clearFiles()
        packingRef6.value?.clearFiles()
        packingRef7.value?.clearFiles()

        if(type == "apply"){
            showType.value = 'apply'
        }else if(type == "view"){
            showType.value = 'view'
        }else if(type == "batchApply"){
            if(txjlSelectionInfo.value.length < 1) return ElMessage.warning('请选择需要申请还箱的集装箱') 
            showType.value = 'batchApply'
        }
        if(info != 'other'){
            txjlInfo.value = info  
        }
        returnBoxTypeValue.value = txjlInfo.value.returnBoxType || 10
        hxApplyDialog.value = true
    })
   
}
const submitApplication = async() => {

    if(showType.value == 'batchApply'){
        let txRecordarr = []
        txjlSelectionInfo.value.forEach(item => {
            let record = {id:item.id, returnBoxType: returnBoxTypeValue.value}
            txRecordarr.push(record)
        });
        await batchReturnApply(txRecordarr).then(res => {
            if(res.code == "00000"){
                hxApplyDialog.value = false
                viewContainer('txjl')
                ElMessage.success("批量还箱申请发送成功")
            }else{
                ElMessage.warning(res.msg)
            }
        })
    }else{
        let data = {
            returnBoxType: returnBoxTypeValue.value,
            // planReturnDate: null,
            // detailFileList: '', //提箱照片
            // arrivalWaybill: '', //到站运单
            // turnCustomBill: '' //turnCustomBill
        }
        if(returnBoxTypeValue.value == 10){ //箱属
            data.detailFileList = JSON.stringify(packingRef5.value.fileList)
        }else if(returnBoxTypeValue.value == 15){ //还箱令
            data.planReturnDate = planReturnDate.value.toISOString(),
            data.arrivalWaybill = JSON.stringify(packingRef6.value.fileList)
            data.turnCustomBill = JSON.stringify(packingRef7.value.fileList)
        }
        await returnApply(txjlInfo.value.id,data).then(res => {
            if(res.code == "00000"){
                hxApplyDialog.value = false
                viewContainer('txjl')
                ElMessage.success("还箱申请发送成功")
            }else{
                ElMessage.warning(res.msg)
            }
        })
    }
}
interface PickupRecord {
    id: string
    containerNo: string
    boxType: string
    boxCondition: string
    packingDate: string
    returnStatus: number
    yardName: string
    packingNo: string
    returnCity: string
    detailFileList: string
    [key: string]: any
}
const txjlSelectionInfo = ref([] as PickupRecord[])
const txjlSelectionChange = (newSelection:PickupRecord[]) => {
    txjlSelectionInfo.value = newSelection
}

// 开提箱单
const pickUpListDialog = ref(false)
const packingValidityPeriod = ref([])
const packingRemark = ref('')
const packingRef = ref()
const needPackingNum = ref(0)
const previewListDialog = ref(false) //预览提箱单
const packingType = ref('5') // 5:自由箱 15：外调箱
const packingInfo = ref([])

const ownboxRef = ref()
const externboxlRef=ref()
const showPickingList = () =>{ 
   needPackingNum.value = porps.orderData.boxQuantity - porps.orderData.packingAllocationQuantity
   packingInfo.value.length = 0
   const rowData = porps.orderData
   let packingItem = {
        id: rowData.id,
        orderNo: rowData.orderNo,
        planPickupDate: rowData.planPickupDate,
        createTime: rowData.createTime,
        packingAllocationQuantity: rowData.packingAllocationQuantity,
        boxQuantity:rowData.boxQuantity,
        needPackingNum: rowData.boxQuantity - rowData.packingAllocationQuantity,
        boxType:rowData.boxType,
        boxCondition:rowData.boxCondition,
        carryCityId:rowData.carryCityId,
        returnCityId:rowData.returnCityId

    }
    packingInfo.value.push(packingItem)
    showPackingType.value = true
    pickUpListDialog.value = true
}
//过期重开
const showPackingType = ref(true)
const drawerPackingOpen = (row:any) => {
    ElMessageBox.confirm('您确定要将提箱单设置为“已过期”状态，并重新开具提箱单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        // param.packingType = row.containerClassify // 5-自有箱 15-外调箱
        // param.orderType = row.orderType  // 开提箱单 5：租箱 10：回调
        // param.drawerPacking = true
        pickUpListDialog.value = true
        showPackingType.value = false
        nextTick(() => {
            if(row.containerClassify =='5'){
                packingType.value = '5' // 5-自有箱 15-外调箱
                nextTick(() => {
                    ownboxRef.value?.openBox(row)
                })
            }else if(row.containerClassify =='15'){
                packingType.value = '15' // 5-自有箱 15-外调箱
                nextTick(() => {
                    externboxlRef.value?.openBox(row)
                })
            }
            
        })
    }).catch(() => { });
}
let intervalId:any
const closeDialog = (type:string) => {
    if(type == 'tx'){
        showFullScreenLoading({tips:'提箱单生成中....'})
        intervalId = setInterval (() => {
            viewContainer('txd');
            pickUpListDialog.value = false
        }, 500)
    }  
}
// const submitPicking = async() =>{
//    const rowData = porps.orderData
//    const orderListData = [{
//        orderId: rowData.id,
//        orderNo: rowData.orderNo,
//        planPickupDate: rowData.planPickupDate,
//        createTime: rowData.createTime,
//        needPackingNum: needPackingNum.value
//    }]
//    const reqParam = {
//        orderType:5,
//        boxType:rowData.boxType,
//        boxCondition: rowData.boxCondition,
//        orderList: JSON.stringify(orderListData),
//        packingValidityPeriodStart: packingValidityPeriod.value[0],
//        packingValidityPeriodEnd: packingValidityPeriod.value[1],
//        packingFileList: JSON.stringify(packingRef.value.fileList),
//        remark: packingRemark.value
//    }
//    await addPacking(reqParam).then(res => {
//        if(res.code == "00000"){
//            ElMessage.success("提箱单开具成功")
//        }
//    }).catch(error => {
//        console.log(error)
//    })
// }
// 查看提箱记录
const pickupRecord = ref([])
const previewList = async(packing:any)=>{
   await saleBoxPage({packingNo:packing.packingNo}).then(res => {
       if(res.code == '00000'){
           pickupRecord.value = res.data.list || []
       }else{
           ElMessage.warning(res.msg)
       }
   }).catch(error => {
       ElMessage.warning(error)
   })
   previewListDialog.value = true 
}

// 新增提箱记录
const pickupRecordList = reactive({
   id:'',
   packingNo: "",
   yardName:'',
   boxType:'',
   boxCondition:'',
   driverInfo:'',
   containerNo:'',
   packingDate:'',
   plateNumber:'',
   rentInPrice:'',
   rentInCurrency:"USD",
   orderList:[]
})
const addPickupRecordDialog = ref(false)
const { proxy } = getCurrentInstance();
const orderListref = ref()
const showTips = ref(false)
const cacheInfo = ref({})
const addPickupRecord = (packing:any) => {
    cacheInfo.value = packing
    pickupRecordList.id = packing.orderId
    pickupRecordList.packingNo = packing.packingNo
    pickupRecordList.boxType = packing.boxType
    pickupRecordList.boxCondition = packing.boxCondition
    pickupRecordList.yardName = packing.yardName
    pickupRecordList.rentInPrice = packing.rentInPrice
    pickupRecordList.rentInCurrency = packing.rentInCurrency
    orderBoxQty(packing.packingId).then((res: any) => { 
        if(res.code == '00000'){
            pickupRecordList.orderList = res.data || []
            addPickupRecordDialog.value = true
            nextTick(() => {
                if (pickupRecordList.orderList.length > 0) {
                    orderListref.value?.toggleRowSelection(pickupRecordList.orderList[0], true)
                }
            })
        }
        
    })
    showTips.value = false
}


//提完
const endPacking = (row: any) => {
  ElMessageBox.confirm('请确认是否不再提箱且确认提箱记录是否已经全部上传？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    finishPacking(row.id).then((res: any) => {
        viewContainer('txd');
    })
  }).catch(() => { });
}
const selectedItems = ref<any[]>([])

const handleSelectionChange = (selection: any[]) =>{
   selectedItems.value = selection
   if (selection.length > 1) {
     // 如果选择了多行，只保留最后一行
     orderListref.value?.clearSelection();
     orderListref.value?.toggleRowSelection(selection[selection.length - 1]);
   }
}

const packingRef1 = ref()
const handleAddPackingDetail = async () => {
    if(porps.businessRoleEnum == 5){
       if(JSON.stringify(packingRef1.value.fileList).length < 5) return ElMessage.error('请上传提箱照片') 
    }
    proxy.$refs.ruleRef.validate(valid => {
        if (valid) {
            const imgList = packingRef1.value.fileList || []
            if(selectedItems.value.length < 1) return ElMessage.error('请选择订单')
            const data = {
                orderId: selectedItems.value[0].orderId || '', // 订单id
                orderNo: selectedItems.value[0].orderNo || '', // 订单号
                packingId: selectedItems.value[0].packingId || '',  // 提箱单id
                containerNo: pickupRecordList.containerNo,
                plateNumber: pickupRecordList.plateNumber,
                packingDate: pickupRecordList.packingDate,
                yardName: pickupRecordList.yardName,
                boxType:pickupRecordList.boxType,
                boxCondition:pickupRecordList.boxCondition,
                detailFileList: JSON.stringify(imgList) || null,
                rentInCurrency: pickupRecordList.rentInCurrency,
                rentInPrice: pickupRecordList.rentInPrice,
                isChangeBox: 10, //是否换箱 5-是  10-否 
                // "oidContainerNo": param.isChangeBox == '5' ? param.oidContainerNo : null,
            
            }
            addPackingDetail(data).then((res: any) => {
                if(res.code == '00000'){
                    // addPickupRecordDialog.value = false
                    addPickupRecord(cacheInfo.value)
                    viewContainer('txjl')
                    pickupRecordList.containerNo = ''
                    pickupRecordList.plateNumber = ''
                    packingRef1.value?.clearFiles()
                    ElMessage.success('成功添加一条提箱数据，可在当前窗口继续添加')
                    showTips.value = true
                }else{
                    ElMessage.warning('提箱记录添加失败')
                }
            })
        } else {
            return false
        }
    })
}

// 财务-> 费用
const activeNames = ref('1')
const activeName = ref('fy') //fy:费用 zd:账单 发票：fp
const financeInfo = ref([])
const displayCostDialog = ref(false)
const displayCostSearch = reactive({
   containerNo:'',
   businessNo:'',
   refType:'',
   writeOffStatus:'', //是否生成对账单  5-未建账单 10-已建账单 15-已对账
   feeCode:'', //5-修箱费 10-提箱费  15-翻箱费  20-其他费  25-超期费 30-吊装费  35-堆存超期费 40-订单金额 45-应付租箱费 50-应收租箱费 55-购箱费 60-卖箱费 65-箱贴费 70-折旧费
   settlementCompanyType:'', //5-客户  10-堆场  15-第三方  20-箱东
   settlementCompanyName:'',
   settlementDirection:'', // 应收:1 应付:-1
   billNo:'',
   billType:'',
   billStatus:'',
   beginWriteOffDate:[],
   beginCreateDate:[],
   invoiceOrder:'',
   invoiceDirection:'',// 发票结算流向 
   invoiceTitle:'', //发票结算单位
   invoiceNo:'', //发票发票号
   invoiceStatus:'', //发票状态
   creditCode:'', //纳税人识别号
   createDate:[],
   invoiceType:''
})

// 财务 - 清除筛选信息
const restFrom = () => {
   displayCostSearch.containerNo = ''
   displayCostSearch.businessNo = ''
   displayCostSearch.refType = '',
   displayCostSearch.writeOffStatus = '', //是否生成对账单  5-未建账单 10-已建账单 15-已对账
   displayCostSearch.feeCode = '', //5-修箱费 10-提箱费  15-翻箱费  20-其他费  25-超期费 30-吊装费  35-堆存超期费 40-订单金额 45-应付租箱费 50-应收租箱费 55-购箱费 60-卖箱费 65-箱贴费 70-折旧费
   displayCostSearch.settlementCompanyType = '', //5-客户  10-堆场  15-第三方  20-箱东
   displayCostSearch.settlementCompanyName= '',
   displayCostSearch.settlementDirection= '', // 应收:1 应付:-1
   displayCostSearch.billNo= '',
   displayCostSearch.billType= '',
   displayCostSearch.billStatus= '',
   displayCostSearch.beginWriteOffDate = [],
   displayCostSearch.beginCreateDate = [],
   displayCostSearch.invoiceOrder= '',
   displayCostSearch.invoiceDirection= '',// 发票结算流向 
   displayCostSearch.invoiceTitle= '', //发票结算单位
   displayCostSearch.invoiceNo= '', //发票发票号
   displayCostSearch.invoiceStatus= '', //发票状态
   displayCostSearch.creditCode= '', //纳税人识别号
   displayCostSearch.createDate = [],
   displayCostSearch.invoiceType= ''
}
// 账单 -> 编辑
const router = useRouter();
const editPermissions = (row:any,type:number) =>{
    router.push({ 
        path: '/financialManage/billsInfo', 
        query: { 
            id:row.id, 
            billType:row.billType,
            type:type
        } 
    })
}
// 账单 -> 核销
const verificationModalMormRef = ref()
const verificationTap = (row:any) =>{
    verificationModalMormRef.value.onShow(row.id,row.refType,1)
}
//// 账单 -> 撤销
const revocationTap = (row:any)=>{
    ElMessageBox.confirm(
    '您确定要撤销当前账单？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
        let data={
            ids:[],
            billStatus:10
        }
        data.ids.push(row.id)
        updateBillStatus(data).then((res:any) => {
            if(res.code == '00000'){
                ElMessage.success('账单撤销成功')
            }else {
                ElMessage.warning(res.msg)
            }
        }).catch(error => {
                console.log(error)
        })
    })
}
// 账单 -> 申请发票
const applyInvoiceModalMormRef = ref()
const invoiceRequest = (row:any) => {
    let billList = []
    let obj = {
        billId:row.id,
        billNo:row.billNo
    }
    billList.push(obj)
    applyInvoiceModalMormRef.value.onShow(billList)
}

// 财务 -> 筛选搜索
const cwSelectionInfo = ref<any[]>([])
const cwSelectionChange = (newSelection: any[]) => {
    cwSelectionInfo.value = newSelection
    console.log(cwSelectionInfo.value)
}
const submitSearch = async() => {
    financeInfo.value.length = 0
    if(activeName.value == 'fy'){ //费用
        const { container, containerList } = formatContainerNo(displayCostSearch.containerNo);
        const fyData = {
            orderId:porps.orderData.id,
            containerNo: container, // 单箱号查询
            containerNos: containerList, // 多箱号查询
            businessNo: displayCostSearch.businessNo,
            refType: displayCostSearch.refType,
            writeOffStatus: displayCostSearch.writeOffStatus,
            feeCode:displayCostSearch.feeCode,
            settlementCompanyName: displayCostSearch.settlementCompanyName
        }
       await selectFeeDetailsListByOrderId(fyData).then(res=>{
           if(res.code == "00000"){
               financeInfo.value = res.data.list || []
           }else{
               ElMessage.warning(res.msg)
           }
       }).catch(error => {
           ElMessage.error(error)
       })

    }else if(activeName.value == 'zd'){ //账单
        const { container, containerList } = formatContainerNo(displayCostSearch.containerNo);
        const zdData = {
            orderId:porps.orderData.id,
            containerNo: container, // 单箱号查询
            containerNos: containerList, // 多箱号查询
            billNo: displayCostSearch.billNo,
            refType: displayCostSearch.refType,
            billType: displayCostSearch.billType,
            billStatus: displayCostSearch.billStatus,
            settlementCompanyName: displayCostSearch.settlementCompanyName,
            settlementDirection: displayCostSearch.settlementDirection,
            beginWriteOffTime: '',
            endWriteOffTime: '',
            beginCreateTime: '',
            endCreateTime: ''
        }
        if(displayCostSearch.beginWriteOffDate.length > 1){
            zdData.beginWriteOffTime = displayCostSearch.beginWriteOffDate[0]
            zdData.endWriteOffTime = displayCostSearch.beginWriteOffDate[1]
        }
        if(displayCostSearch.beginCreateDate.length > 1){
            zdData.beginCreateTime = displayCostSearch.beginCreateDate[0]
            zdData.endCreateTime = displayCostSearch.beginCreateDate[1]
        }
       await getRentBillListByOrderId(zdData).then(res=>{
           if(res.code == "00000"){
               financeInfo.value = res.data || []
           }else{
               ElMessage.warning(res.msg)
           }
       }).catch(error => {
           ElMessage.error(error)
       })
    }else if(activeName.value == 'fp'){ //发票
        const fpData = {
            orderId: porps.orderData.id,
            invoiceOrder: displayCostSearch.invoiceOrder,
            invoiceDirection: displayCostSearch.invoiceDirection,
            invoiceTitle: displayCostSearch.invoiceTitle,
            invoiceNo: displayCostSearch.invoiceNo,
            invoiceStatus: displayCostSearch.invoiceStatus,
            creditCode: displayCostSearch.creditCode,
            beginCreateDate: displayCostSearch.createDate?.[0] || null,
            endCreateDate: displayCostSearch.createDate?.[1] || null,
            invoiceType: displayCostSearch.invoiceType
        }
        await getInvoicePageNew(fpData).then(res=>{
            if(res.code == "00000"){
                financeInfo.value = res.data || []
            }else{
                ElMessage.warning(res.msg)
            }
        }).catch(error => {
            ElMessage.error(error)
       })
   }
}

// 点击页码
// const currentChange = (val:number) => { 
//     param.value.pageNum = val
   
// }

const getRestFrom = async() => {
    await restFrom()
    await submitSearch()
}
// 发票管理 
const invoiceDialog = ref(false)
const dialogType = ref('view')
const invoiceUrlInfo = ref([]) //发票地址信息
const fileList1 = ref([])
const invoice = ref({ invoiceType: '5',invoiceAmount:'', })
const invoiceRef = ref({resultList:[]})
// 发票管理 -> 开发票 
const applyInvoice = (row:any) => {
    dialogType.value = 'issue'
    getDetailAndTotal(row)
    invoiceDialog.value = true
}
const handleSubmit = (oprType:string) => {
    if (oprType == 'issue') { // 开发票 
        const resultList = invoiceRef.value.resultList || []
        debugger
        if (resultList.length == 0) {
            return ElMessage({ message: '请上传发票', type: 'warning' })
        }
        if (!invoice.value.invoiceNo) {
            return ElMessage({ message: '请输入发票号', type: 'warning' })
        }
        if (invoice.value.invoiceAmount == '' || Number(invoice.value.invoiceAmount) <= 0) {
            return ElMessage({ message: '发票金额不能为空并且大于0', type: 'warning' })
        }
        const data = {
            id: invoice.value.id,
            invoiceNo: invoice.value.invoiceNo,
            invoiceUrl: JSON.stringify(resultList),
            invoiceAmount:invoice.value.invoiceAmount,
            invoiceType:invoice.value.invoiceType,
        }
        uploadingInvoice(data).then((res: any) => {
            ElMessage.success('开发票成功');
            submitSearch()
            // getTableData()
            // cancel()
        })
    }
}
// 发票识别
const ocrInvoiceNo = (val: any) => {
  invoice.value.invoiceNo = val.data.invoiceNo
}
// 发票管理 -> 查看发票
const showInvoice = (row:any) => {
    dialogType.value = 'view'
    if (!row.invoiceUrl) return ElMessage.error('未发现发票url')
    invoiceUrlInfo.value = JSON.parse(row.invoiceUrl) || []
    invoiceDialog.value = true
}

function getDetailAndTotal(val: any) {
  getInvoicesInfo(val.id).then((res: any) => {
    invoice.value = res.data
  })
}
// 财务 -> （费用、账单、发票）【选择】 
const displayCost = (type:string) =>{
   activeName.value = type
   submitSearch()
   displayCostDialog.value = true
}

const handleClick = async(tab) => {
   activeName.value = tab.props.name
   await restFrom()
   await submitSearch()
}

// 导出费用信息
const exportFinanceList = () =>{
    const ids = cwSelectionInfo.value.map((item: any) => item.id)
    if(ids.length < 1) return ElMessage.warning('至少选择条数据')
    if(activeName.value == 'fy'){ //导出费用
        ElMessageBox.confirm('确认要导出选中的账单', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let reqParameters = {feeDetailsIds: ids}
            exporFeeDetails(reqParameters).then((res: any) => {
                globalDownloadFile(res, '费用明细') 
            }).catch((error) => {
                ElMessage.error(error)
            })
        }).catch(() => { });
    }else if(activeName.value == 'zd'){ //导出账单

    }else if(activeName.value == 'fp'){ //导出发票
        ElMessageBox.confirm('确认要导出选中的发票信息', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            let reqParameters = {invoiceIds: ids}
            exportInvoice(reqParameters).then((res: any) => {
                globalDownloadFile(res, '发票明细') 
            }).catch((error) => {
                ElMessage.error(error)
            })
        }).catch(() => { });
    }
}
// 新建账单
const addModalMormRef = ref()
const createBill = () => {
    if(!cwSelectionInfo.value.length) return ElMessage.warning('至少选择一条费用明细')
    const isSame = isFieldUniform(cwSelectionInfo.value,'settlementDirection')
    if(!isSame) return ElMessage.warning('请选择结算流向相同的费用明细')
    let isWriteOff = false
    cwSelectionInfo.value.forEach(item => {
        if(item.writeOffStatus == 10){isWriteOff =  true}
    })
    if(isWriteOff) return ElMessage.warning('请取消选择已建账单的费用明细')

    let ids: any[] = []
    cwSelectionInfo.value.map((item: any) => {
        ids.push(item.id)
    })

    addModalMormRef.value.onShow(ids,1,cwSelectionInfo.value[0].settlementDirection)
}

function isFieldUniform(arr, field) {
    if (arr.length === 0) return true; // 空数组视为相同
    const firstValue = arr[0][field];
    return arr.every(item => item[field] === firstValue);
}

// 查看还箱单/还箱记录  hxd:还箱单  hxjl:还箱记录
const hxdDialog = ref(false)
const returnContainer = ref('hxd')
const returnDocuments = ref([])
const returnDocumentsJL = ref([])
const viewReturnList = (type:string) => {
    if(type == 'hxd'){ // 查看还箱单
        returnContainer.value = 'hxd'
        hxRentBoxList(porps.orderData.id).then((res: any) => { 
            if(res.code == '00000' && res.data.length > 0){
                returnDocuments.value = res.data || []
                tryHideFullScreenLoading()
                clearInterval(hxIntervalId)
            }else{
                ElMessage.warning('还没有还箱单')
            }
            hxdDialog.value = true
        })  
    }else if(type == 'hxjl'){ // 查看还箱记录
        returnContainer.value = 'hxjl'
        hxjlRentBoxList(porps.orderData.id).then((res: any) => { 
            if(res.code == '00000'){
                returnDocumentsJL.value = res.data
            }else{
                ElMessage.warning('还没有还箱单')
            }
        })
        hxdDialog.value = true
    }

}
// 开还箱令/箱属  hxl:还箱令  xs:箱属
const credentialsDialog = ref(false)
const credentialsType = ref('hxl')
const returnCredentials = (type:string) => {
    credentialsType.value = type
    selectBoxList.value = []
    credentialsDialog.value = true
}

// 开箱属/还箱令是 选择集装箱
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const selectBoxList = ref([])
const boxOwnerContent = ref('') //箱属内容
const instruction = ref('') //还箱指令号
const returnValidityPeriod = ref([]) // 还箱有效期
const packingRef2 = ref()
const packingRef3 = ref()
const choiceBoxDialog = ref(false)
const choiceBoxData = ref([])
const containerNoStr = ref('')
const yardContacts = ref('')
const tel = ref('')
const yardContactSerialNo = ref('')
const choiceBox = (type:number) => { 
    choiceBoxDialog.value = true
    const containerNos = getContainerNos()
    let data = {
        statusList: [20], //集装箱 未还
        containerNos: containerNos.length > 1 ? containerNos : [],
        containerNo: containerNos.length == 1 ? containerNos[0] : null,
        orderType: '5',
        returnCityId: porps.orderData.returnCityId,
        boxEastOperatorUserId: userStore.getUser().id,
        orderId:porps.orderData.id,
        pageNum: 1,
        pageSize: 10000,
    };

    returnPage(data).then((res: any) => { 
        if(res.code == "00000"){
            choiceBoxData.value = res.data.list || []

        }else{
            ElMessage.error(res.msg)
        }
    })
}
const multipleSelection = ref([])
const handleSelection = (val:any) => {
    multipleSelection.value = val
}
const boxInfo = ref('')
const returnCityInfo = ref('')
const submitSelection = () => {
    selectBoxList.value = multipleSelection.value
    // 统计 category 属性的数量
    const countByCategory = selectBoxList.value.reduce((acc, item) => {
    acc[item.boxType] = (acc[item.boxType] || 0) + 1;
        return acc;
    }, {} as Record<string, number>);
    boxInfo.value = ''
    // 获取对象属性数量
    const propertyCount = Object.keys(countByCategory);
    const propertyCountLength = Object.keys(countByCategory).length - 1;
    propertyCount.forEach((item,index) =>{
        const dos =  index < propertyCountLength ? '、' :''
        boxInfo.value =  boxInfo.value + (basicConfig.boxTypeInfo1[item] +'*'+ countByCategory[item] + dos)
    })

    let retyrnCityArr = []
    if(selectBoxList.value.length > 0){
        let cityArr = []
        selectBoxList.value.forEach(item => {
            if(item.returnCity){
                cityArr = cityArr.concat(JSON.parse(item.returnCity))
            }
        })
        retyrnCityArr = Array.from( new Map(cityArr.map(item => [item.returnCityId, item])).values())
    }
    const returnCityNameArr = retyrnCityArr.map(item => item.returnCityName);
    returnCityInfo.value = returnCityNameArr.join('、')
    choiceBoxDialog.value = false
}

// 获取箱号
const getContainerNos = () => {
  let containerNos:any //param.containerNos ? param.containerNos.split(",") :
  if (containerNoStr.value) {
    const dos = containerNoStr.value.indexOf(",") > -1 ? ',' : '，'
    containerNos = containerNoStr.value.split(dos).map((item) => item.trim())
  }
  return containerNos || []
}
const yardInfoData = ref({yardAddress:'', id:'', workTime:'', yardContacts:''})

const yardInfo = (id,info) => {
    yardInfoData.value = info
    yardContacts.value = JSON.parse(info.yardContacts)[0].contacts
    tel.value = JSON.parse(info.yardContacts)[0].tel
    yardContactSerialNo.value = JSON.parse(info.yardContacts)[0].yardContactSerialNo
}

const changeContacts = (value:any) => {
    const contactsList = JSON.parse(yardInfoData.value.yardContacts)
    contactsList.forEach(item => {
        if(item.contacts == value){
            tel.value = item.tel
            yardContactSerialNo.value = item.yardContactSerialNo
        }
    })
}

let hxIntervalId:any
const submitCredentials = (type:string) => { //xs:箱属  hxl:还箱令
    const containerNoList = []
    const containerCountList = []
    selectBoxList.value.forEach(item => {
        let items = {
            containerId: item.id,
            containerNo: item.containerNo,
            boxType: item.boxType,
            boxCondition: item.boxCondition
        }
        containerNoList.push(items)
    })

    const countByCategory1 = selectBoxList.value.reduce((acc, item) => {
    acc[item.boxType] = (acc[item.boxType] || 0) + 1;
        return acc;
    }, {} as Record<string, number>);
    for (const key in countByCategory1) {
        // 使用类型断言确保类型安全
        const value = countByCategory1[key];
        const items = {
            boxType:key,
            boxQuantity:String(value)
        }
        containerCountList.push(items)
    }
    const orderList  = [{orderId:porps.orderData.id,orderNo:porps.orderData.orderNo}]
    let data = {
        returnBoxType: 5,
        orderList: JSON.stringify(orderList),
        containerNoList: JSON.stringify(containerNoList),
        boxEastYardId: yardInfoData.value.id,
        containerCountList: JSON.stringify(containerCountList),
        boxOwnerContent:boxOwnerContent.value,  //箱属内容
        detailFileList:""
    }
    if(type == 'xs'){ //箱属
        data.returnBoxType = 10
        data.detailFileList = JSON.stringify(packingRef2.value.fileList)
       

    }else if(type == 'hxl'){ //还箱令
        data.returnBoxType = 15
        data.yardContactSerialNo = yardContactSerialNo.value
        data.instruction = instruction.value
        if(returnValidityPeriod.value.length == 2){
            data.returnValidityPeriodStart = returnValidityPeriod.value[0]
            data.returnValidityPeriodEnd = returnValidityPeriod.value[1]
        }
        data.detailFileList = JSON.stringify(packingRef3.value.fileList)

    }
    if(!data.boxEastYardId) return ElMessage.warning('请选择堆场')
    if(!selectBoxList.value.length) return ElMessage.warning('请选择箱号')
    showFullScreenLoading({tips:'还箱单生成中....'})
    addReturn(data).then((res: any) => { 
        if(res.code == "00000"){
            hxIntervalId = setInterval (() => {
                viewReturnList('hxd')
                credentialsDialog.value = false
            }, 500)
           
        }
    })
}

const rules = ref({
 yardName: [{ required: true, message: "不能为空", trigger: "blur" }],
 driverInfo: [
   { required: true, message: "不能为空", trigger: "blur" },
   { pattern: /^[^\uD800-\uDBFF\uDC00-\uDFFF\uD83C\uDDE6-\uDDFF\u2000-\u206F]+$/, message: '不允许输入表情符号', trigger: 'blur' }
 ],
 containerNo: [
   { required: true, message: "不能为空", trigger: "blur" },
   { pattern: /^[A-Z]{3}U\d{7}$/, message: "箱号格式为4个大写字母+7个数字", trigger: "blur" }
 ],
 oidContainerNo: [{ required: true, message: "不能为空", trigger: "blur" }],
 packingDate: [{ required: true, message: "不能为空", trigger: "blur" }],
//  packingFileUrls: [{ required: porps.businessRoleEnum == 5 ? true:false, message: "不能为空", trigger: "blur" }],
 orderList: [{ required: true, message: "不能为空", trigger: "blur" }]
 // email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
 // phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
});
const companyRole=ref('zx') //判断货代还是箱东
onMounted(()=>{
     companyRole.value = localStorage.getItem('companyRole') 
    
})
// 清除dialog缓存数据
const handleDialogClose = () =>{
    // containerInfo.value.plateNumber = ''
    // containerInfo.value.boxOwnerContent = ''
    // containerInfo.value.detailFileList = ''
    // containerInfo.value.rentInPrice = ''
    // containerInfo.value.rentInCurrency = 'CNY'
    // packingRef4.value?.clearFiles()
}
// 下载附件
const downloadAtta = (row:any) => {
    if (row.pdfFile) {
        const pdfFile = JSON.parse(row.pdfFile)
        if (pdfFile.length < 1 || !pdfFile[0].url) return ElMessage.warning('没有找到提箱单')
        downloadIamge(pdfFile[0].url,pdfFile[0].originalFileName || new Date(Date.now()+28800000).toISOString())
    } else {
        ElMessage.error('没有找到提箱单')
    }
}
// 编辑提箱单
const txdDrawer = ref(false)
const txdInfo = ref({})
const rentOrderList = ref([])
const packingRecord= ref([{
    boxType:'',
    boxCondition:'',
    totalQuantity:''
}])
const editPacking = (row:any) => { 
    txdInfo.value = row 
    packingRecord.value = ([{
        boxType: row.boxType,
        boxCondition: row.boxCondition,
        totalQuantity: row.totalQuantity
    }])
    getPackingData(row.packingId).then((res:any) => {
        rentOrderList.value = JSON.parse(res.data.orderList)
    })
    txdDrawer.value = true
}
// 查看提箱单
const ckPackingInfo = ref({})
const ckTxdDrawer = ref(false)
const packingRecord1 = ref([])
const containerNoInfo = ref([])
const rentOrderList1 = ref([])
const ckPacking = async(row:any) => {
    await getPackingData(row.packingId).then((res:any) => {
        ckPackingInfo.value = res.data
        containerNoInfo.value = JSON.parse(res.data.containerNoList)
        rentOrderList1.value = []
        packingRecord1.value.length = 0
        let orderListInfo = JSON.parse(res.data.orderList)
        if(porps.businessRoleEnum == 10){ // 箱东
            orderListInfo.forEach(item => {
                item.agentUserName = res.data.agentUserName
                item.agentUserTel = res.data.agentUserTel
                item.agentUserAreaCode = res.data.agentUserAreaCode
                item.planPickupDate = res.data.planPickupDate
                item.createTime = res.data.createTime
            })
        }else if(porps.businessRoleEnum == 5){ //货代
            orderListInfo.forEach(item => {
                item.agentUserName = res.data.boxEastUserName
                item.agentUserTel = res.data.agentUserTel
                item.agentUserAreaCode = res.data.agentUserAreaCode
                item.planPickupDate = res.data.planPickupDate
                item.createTime = res.data.createTime
            })
        }
        rentOrderList1.value = orderListInfo
        const record1 = {
            boxType:res.data.boxType,
            boxCondition:res.data.boxCondition,
            boxQuantity: res.data.totalQuantity
        }
        packingRecord1.value.push(record1)
    })
    ckTxdDrawer.value = true
}
const handleNameClick = (row:any) => {
    ckPacking(row)
}
// 查看还箱单详情
const hxdInfoDialog = ref(false)
const hxdInfo = ref({})
const handleBoxNoClick = async(row:any) =>{
    await getReturnData(row.returnBoxId).then((res:any) =>{
        if(res.code == '00000'){
            hxdInfo.value = res.data
            hxdInfoDialog.value = true
        }else{
            ElMessage.warning('请确认提箱数据是否正常')
        }
    }).catch(err =>{
        ElMessage.warning('请确认提箱数据是否正常' + err)
    })
    
}

const boxVolumeSp = (row:any) => { 
    try{
        row = JSON.parse(row.containerCountList)
    }catch(err){
        row = []
    }
    let volumeStr = ''
    for (let i = 0; i < row.length; i++) {
        volumeStr += basicConfig.boxTypeInfo1[row[i].boxType] + '*' + row[i].boxQuantity + ((i < row.length - 1)? '、' : '')
    }
    return volumeStr || '--'
}

// 提箱单编辑提交
const addBoxFileRef1 = ref()
const txdDrawerSubmit = (packingId:any) => { 
    let data = {
        id: packingId,
        pdfFile:JSON.stringify(addBoxFileRef1.value.fileList)
    }
    updatePackingInfoPdfFile(data).then((res: any) => { 
        if(res.code == "00000"){
            ElMessage.success("提箱单修改成功")
        }
        txdDrawer.value = false
    })  
}

// 下载附件
const downloadAtta1  = (row:any) => {
    // let fileListStr = ''
    // if(row.returnBoxType == 10 ){ //箱属
    //     fileListStr = row.pdfFile
    // }else{ // 还箱单/还箱令
    //     fileListStr = row.detailFileList
    // }
    let fileListStr = row.detailFileList
    if (fileListStr) {
        const fileListObj = JSON.parse(fileListStr)
        if (fileListObj.length < 1 || !fileListObj[0].url) return ElMessage.warning('没有找到还箱单')
        downloadIamge(fileListObj[0].url,fileListObj[0].originalFileName || new Date(Date.now()+28800000).toISOString())
    } else {
        ElMessage.error('没有找到还箱单')
    }
}

// 新增还箱记录
const returnDateDialog = ref(false)
const thisOpt = ref("add")
const returnDateSync = ref('')
const returnRecordInfo = ref({})
const handleEdit = (type,row:any) => {
    if(type == 'edit'){
        thisOpt.value = 'edit'
    }else if('add'){
        thisOpt.value = 'add'
    }
    returnRecordInfo.value = row
    returnDateDialog.value = true
}
// 提交修改信息
const handleReturnDate = async() => {
    const data = [{
        id: returnRecordInfo.value.id,
        returnDate: returnDateSync.value
    }]
    await updateReturnDate(data).then((res: any) => {
        if(res.code == "00000"){
            viewReturnList('hxjl') 
        }else{
            ElMessage.warning('日期修改失败')
        }
        returnDateDialog.value = false
    })
}
// 添加修改备注
const dialogVisibleRemark = ref(false)
const remarkValSync = ref("")
// const returnRecordInfo = ref({})
const editType1 = ref(0) //1：财务-> 费用 编辑备注 2：还箱记录编辑备注
const handleEditRemark = async(type:string,row:any,editType:number) =>{
    if(type == "edit"){
        thisOpt.value = 'edit'
    }else if(type ==  "add"){
        thisOpt.value = 'add'
    }
    editType1.value = editType
    remarkValSync.value = row.remark
    returnRecordInfo.value = row
    dialogVisibleRemark.value = true
}
const handleRemark = () => {
    const data = { id: returnRecordInfo.value.id, remark: remarkValSync.value }
    if(editType1.value == 1){
        updateFeeDetailsRemark(data).then((res: any) => {
            if(res.code == "00000"){
                ElMessage.success('备注修改成功')
                submitSearch()
            }else{
                ElMessage.warning('备注修改失败')
            }
        })
    }else if(editType1.value == 2){
        updateReturnMark(data).then((res: any) => {
            if(res.code == "00000"){
                ElMessage.success('备注修改成功')
                viewReturnList('hxjl') 
            }else{
                ElMessage.warning('备注修改失败')
            }
        })
    }
    
    // updateFeeDetailsRemark
    dialogVisibleRemark.value = false
}

//上传附件 
const dialogPitchUploadVisible = ref(false)
const uploadUrlListHD = ref([])
const uploadUrlListXD = ref([])
const uploadFileRefXD = ref()
const uploadFileRefHD = ref()
const uploadReturn = async(type:string,row:any) =>{
    uploadFileRefXD.value?.clearFiles()
    uploadFileRefHD.value?.clearFiles()
    if(type == "edit"){
        thisOpt.value = 'edit'
    }else if(type ==  "add"){
        thisOpt.value = 'add'
    }
    uploadUrlListXD.value = JSON.parse(row.detailFileList) || []
    uploadUrlListHD.value = JSON.parse(row.fileList) || []
   
    returnRecordInfo.value = row
    dialogPitchUploadVisible.value = true
}

const handlePitchUpload = async() =>{
    const data = {
        id: returnRecordInfo.value.id,
        fileList:'',
        detailFileList: ''
    }
    if(porps.businessRoleEnum == 10){
        data.detailFileList = JSON.stringify(uploadFileRefXD.value.fileList)
        await updateDetailFile(data).then((res: any) => { //箱东修改附件
            if(res.code == "00000"){
                ElMessage.warning('附件更新成功')
                viewReturnList('hxjl') 
            }else{
                ElMessage.warning('附件更新失败')
            } 
        })
    }else if(porps.businessRoleEnum == 5){
        data.fileList = JSON.stringify(uploadFileRefHD.value.fileList)
        await updateAgentFile(data).then((res: any) => { //货代修改附件
            if(res.code == "00000"){
                ElMessage.warning('附件更新成功')
                viewReturnList('hxjl') 
            }else{
                ElMessage.warning('附件更新失败')
            } 
        })
    }
    dialogPitchUploadVisible.value = false
}
// 还箱提示
const hxjlSelection = ref([])
const hxjlSelectionChange = (val: any) => { 
    hxjlSelection.value = val
}
const returnReminderdialog = ref(false)
// 确认还箱
const handleReturnBox = async() => {
    const data = []
    hxjlSelection.value.forEach((item:any) => { 
        data.push(item.id)
    })
    await finishReturnBoxDetail(data).then((res: any) => {
        if(res.code == "00000"){
            viewReturnList('hxjl')
            returnReminderdialog.value = false;
        }else{
            ElMessage.warning('还箱未成功，请重新操作！')
        }   
    })
};
const hxdCheckInfo = ref([])
const hxdSelectionChange = (val:any) => {
    hxdCheckInfo.value = val
}
// 导出还箱单
const exportBoxList = () => {
  const ids = hxdCheckInfo.value.map((item: any) => item.returnBoxId)
  if (ids.length < 1) return ElMessage.warning('请选择需要导出的还箱单！')
  ElMessageBox.confirm('确认要导出选中的还箱单数据', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const data = {returnBoxListIds:ids}
    exportBoxEastReturnBoxList(data).then((res: any) => {
      globalDownloadFile(res,'租箱还箱单信息')
    }).catch((error: any) => {
      ElMessage.error(error)
    })
  }).catch(() => {
  });
}
const formatterNumber = (value:any) =>{ 
  const val = value.replace(/[^\d.]/g, '').replace(/(\.\d*)\./g, '$1').replace(/^(\d{5})\d+/, '$1').replace(/\.(\d{2})\d+/, '.$1')
  if (val.indexOf('.') === -1) {
    return (val- 0)
  }else {
    const valArr = val.split('.')
    return (valArr[0] - 0).toString() + '.' + valArr[1]
  }
}

const parserNumber = (value) => {
  return value.replace(/[^\d.]/g, '')
    .replace(/(\.\d*)\./g, '$1')
    .replace(/^(\d{5})\d+/, '$1')
    .replace(/\.(\d{2})\d+/, '.$1');
};
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7; // 禁用今天之前的日期
};
// 清除缓存
const resetForm = () => { 
        pickupRecordList.id = '',
        pickupRecordList.packingNo = '',
        pickupRecordList.yardName = '',
        pickupRecordList.boxType = '',
        pickupRecordList.boxCondition = '',
        pickupRecordList.driverInfo = '',
        pickupRecordList.containerNo = '',
        pickupRecordList.packingDate = '',
        pickupRecordList.plateNumber = '',
        pickupRecordList.orderList = []
}

// 多个城市拼接
const splitSrray = (row:any) => {
  let newRow = []
  try{
    newRow = JSON.parse(row)
  }catch(e){
    newRow = []
  }
  let newRowStr = ''
  const newRowLength = newRow.length
  newRow.forEach((item,index) => { 
    if(index < newRowLength - 1){
      newRowStr += item.returnCityName + "、"
    }else{
      newRowStr += item.returnCityName
    } 
  })
  return newRowStr || '--'
}

// 箱号号拼接
// [{"refId": 338, "refNo": "FFGU9990765"}]
// boxNoSrray

const contentSplicing = (key:string,row:any) => {
  let newRow = []
  try{
    newRow = JSON.parse(row)
  }catch(e){
    newRow = []
  }
  let newRowStr = ''
  const newRowLength = newRow.length
  newRow.forEach((item,index) => { 
    if(index < newRowLength - 1){
      newRowStr += item[key] + "、"
    }else{
      newRowStr += item[key]
    } 
  })
  return newRowStr || '--'
}
const hxDocumentClose = (done:DoneFn) =>{
    // console.log("done",done)
    returnValidityPeriod.value = []
    instruction.value = ''
    yardContacts.value =''
    done()

}
const copyText = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    ElMessage.success('复制成功');
  } catch (err) {
    // ElMessage.error('复制失败'); // 使用 Element Plus 的错误提示
    fallbackCopyText(text)
  }
};
// 传统的复制方法（降级方案）
function fallbackCopyText(text) {
  try {
    // 创建一个临时的textarea元素来保存文本
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed'; // 避免滚动到底部
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = '0';
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    textArea.style.zIndex = '-999'; // 放在不可见区域

    document.body.appendChild(textArea);
    textArea.focus(); // 聚焦
    textArea.select(); // 选择文本

    const successful = document.execCommand('copy'); // 执行复制命令
    document.body.removeChild(textArea); // 移除临时元素

    if (successful) {
        ElMessage.success('复制成功');
    } else {
      ElMessage.warning('复制失败，请手动选择文本进行复制。');
    }
  } catch (err) {
    ElMessage.warning('复制失败，请手动选择文本进行复制。');
  }
}

</script>
<style lang="scss" scoped>
.steps-container{
   margin-left: -5%;
   width: 110%;
   min-width: 800px 
}
.steps-container :deep(.el-divider--horizontal){
   margin-top: 10px !important;
}
.steps-container :deep(.el-step__line) {
 height: 4px !important; /* 加粗线条 */
 background-color: #F5F5F5; /* 默认状态颜色 */
}
.steps-container :deep(.el-step__line-inner) {
 height: 4px !important; /* 加粗线条 */
 background-color: #2158F3; /* 默认状态颜色 */
}

.steps-container :deep(.el-step__icon) {
 width: 30px;
 height: 30px;
 border: none;
 background-color: #F8F8F8;
 color: #999999;
}
.steps-container :deep(.is-finish .el-step__icon) {
   background-color: #2158F3;
}
.steps-container :deep(.is-finish .is-icon) {
   color: #FFFFFF;
   border-radius: 50%;
}
.steps-container :deep(.is-finish .el-step__icon-inner) {
 color: #FFFFFF; /* 默认状态颜色 */
}

.steps-container :deep(.is-finish) { // 当前步骤

}
.steps-container :deep(.is-process) { // 下一步骤

}
.steps-container :deep(.is-process) { // 下一步骤

}
.containerNo-border{
    border: 1px solid #ddd;
    text-align: center;
}

.rentInPrice{
    :deep(.el-select__wrapper) {
      box-shadow: none !important;
      // height: 30px;
      // border-radius: 0;
  }
}

.clickable-cell {
  text-decoration: underline; /* 添加下划线 */
  color: #409EFF; /* 修改颜色，通常蓝色表示可点击 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
}
.clickable-cell:hover {
  color: #66b1ff; /* 鼠标悬停时颜色变亮 */
  /* text-decoration: underline; 如果不需要悬停时才有下划线，可以去掉这行 */
}
.custom-step-description{
    height: 40px;
}
.status5{
    color: #0364FF;
}
.status10{
    color: #7E47FF;
}
.status15{
    color: #FFCC01;
}
.status20{
    color: #22A86D;
}
.status25{
    color: #FF4B40;
}
.status30{
    color: #666666;
}
</style>